@acronis-platform/ui-react 0.57.1 → 0.58.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A presentational, chronological list of events — an activity feed / audit log\n// / status history. It owns structure, the connector line, markers, and the\n// timestamp/title/description hierarchy only; it never sorts, groups, fetches, or\n// interprets events, and it ships no domain event types or icons. Rendered as a\n// semantic ordered list (`<ol>`/`<li>`); the marker + connector are decorative.\n// Compose Tag / Link / Button / Accordion into the slots. Not a temporal chart —\n// use a Line / Area / Composed chart for that.\n\ntype TimelineSize = 'small' | 'medium';\ntype TimelineDensity = 'compact' | 'default';\n\ntype TimelineContextValue = {\n  size: TimelineSize;\n  density: TimelineDensity;\n};\n\nconst TimelineContext = React.createContext<TimelineContextValue>({\n  size: 'medium',\n  density: 'default',\n});\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'text-xs',\n      medium: 'text-sm',\n    },\n    density: {\n      compact: '',\n      default: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    density: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>,\n    VariantProps<typeof timelineVariants> {\n  /**\n   * `Timeline.Item`s — pass them as direct children (the connector auto-hides on\n   * the last one). Grouping/headings aren't supported as intervening children.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, size, density, children, ...props }, ref) => {\n    const resolved = React.useMemo(\n      () => ({ size: size ?? 'medium', density: density ?? 'default' }),\n      [size, density]\n    );\n    return (\n      <TimelineContext.Provider value={resolved}>\n        <ol\n          ref={ref}\n          data-size={resolved.size}\n          data-density={resolved.density}\n          className={cn(\n            timelineVariants({ size, density }),\n            // Hide the connector on the last item — nothing follows it.\n            '[&>li:last-child_[data-slot=timeline-connector]]:hidden',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineStatus =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'critical';\n\n// Marker colors mirror Metric / the design's status chips: a filled dot (or,\n// with an icon, a `-pressed` badge) in the status family. Neutral reads as the\n// muted foreground.\nconst STATUS_MARKER: Record<\n  TimelineStatus,\n  { dot: string; ring: string; ringColor: string; badge: string }\n> = {\n  neutral: {\n    dot: 'bg-[var(--ui-text-on-status-neutral)]',\n    ring: 'border-[var(--ui-text-on-status-neutral)]',\n    ringColor: 'ring-[var(--ui-text-on-status-neutral)]',\n    badge:\n      'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  },\n  info: {\n    dot: 'bg-[var(--ui-text-on-status-info)]',\n    ring: 'border-[var(--ui-text-on-status-info)]',\n    ringColor: 'ring-[var(--ui-text-on-status-info)]',\n    badge:\n      'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  },\n  success: {\n    dot: 'bg-[var(--ui-text-on-status-success)]',\n    ring: 'border-[var(--ui-text-on-status-success)]',\n    ringColor: 'ring-[var(--ui-text-on-status-success)]',\n    badge:\n      'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  },\n  warning: {\n    dot: 'bg-[var(--ui-text-on-status-warning)]',\n    ring: 'border-[var(--ui-text-on-status-warning)]',\n    ringColor: 'ring-[var(--ui-text-on-status-warning)]',\n    badge:\n      'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  },\n  danger: {\n    dot: 'bg-[var(--ui-text-on-status-danger)]',\n    ring: 'border-[var(--ui-text-on-status-danger)]',\n    ringColor: 'ring-[var(--ui-text-on-status-danger)]',\n    badge:\n      'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  },\n  critical: {\n    dot: 'bg-[var(--ui-text-on-status-critical)]',\n    ring: 'border-[var(--ui-text-on-status-critical)]',\n    ringColor: 'ring-[var(--ui-text-on-status-critical)]',\n    badge:\n      'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n  },\n};\n\nconst DOT_SIZE = { small: 'size-2', medium: 'size-2.5' } as const;\nconst BADGE_SIZE = { small: 'size-6', medium: 'size-7' } as const;\nconst BADGE_ICON_PX = { small: 14, medium: 16 } as const;\nconst ITEM_PB = { compact: 'pb-4', default: 'pb-6' } as const;\n\nexport interface TimelineItemProps\n  extends Omit<React.ComponentProps<'li'>, 'title'> {\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Event title (the primary line). */\n  title: React.ReactNode;\n  /** Optional secondary description. */\n  description?: React.ReactNode;\n  /** Semantic status — tints the marker (a subtle cue, never large blocks of text). */\n  status?: TimelineStatus;\n  /** Icon shown in a status-tinted marker badge instead of the plain dot. */\n  icon?: React.ReactNode;\n  /** Metadata slot under the description — e.g. `Tag`s. */\n  metadata?: React.ReactNode;\n  /** Actions slot — e.g. a `Link` or `ButtonMenu`. */\n  actions?: React.ReactNode;\n  /** Emphasize this item as the current one (a ringed marker). */\n  current?: boolean;\n  /** Dim a non-applicable / inactive item. */\n  disabled?: boolean;\n  /** Expandable detail composed by the caller — e.g. an `Accordion`. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      timestamp,\n      title,\n      description,\n      status = 'neutral',\n      icon,\n      metadata,\n      actions,\n      current = false,\n      disabled = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { size, density } = React.useContext(TimelineContext);\n    const marker = STATUS_MARKER[status];\n\n    return (\n      <li\n        ref={ref}\n        data-status={status}\n        data-current={current || undefined}\n        data-disabled={disabled || undefined}\n        // A disabled item is dimmed *and* announced as disabled; its slotted\n        // controls (actions/links) stop taking pointer input — matching the\n        // repo's `aria-disabled` + `pointer-events-none` pattern (see link.tsx).\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex gap-3',\n          disabled && 'opacity-60 pointer-events-none',\n          className\n        )}\n        {...props}\n      >\n        {/* Marker column: dot / icon badge + the connector line below it. */}\n        <div className=\"flex flex-col items-center\">\n          {icon != null ? (\n            <span\n              aria-hidden\n              className={cn(\n                'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',\n                BADGE_SIZE[size],\n                marker.badge,\n                // Ring the badge for a `current` item (same emphasis as the dot).\n                current &&\n                  cn(\n                    'ring-2 ring-offset-2 ring-offset-background',\n                    marker.ringColor\n                  )\n              )}\n            >\n              {React.isValidElement(icon)\n                ? React.cloneElement(\n                    icon as React.ReactElement<{ size?: number }>,\n                    { size: BADGE_ICON_PX[size] }\n                  )\n                : icon}\n            </span>\n          ) : (\n            <span\n              aria-hidden\n              className={cn(\n                'mt-1 shrink-0 rounded-full',\n                DOT_SIZE[size],\n                current ? cn('border-2 bg-background', marker.ring) : marker.dot\n              )}\n            />\n          )}\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            className=\"mt-1 w-px flex-1 bg-border\"\n          />\n        </div>\n\n        {/* Content column. */}\n        <div className={cn('min-w-0 flex-1', ITEM_PB[density])}>\n          {timestamp != null && (\n            <div className=\"text-xs leading-tight text-muted-foreground\">\n              {timestamp}\n            </div>\n          )}\n          <div className=\"font-medium leading-snug text-foreground\">{title}</div>\n          {description != null && (\n            <div className=\"mt-0.5 text-muted-foreground\">{description}</div>\n          )}\n          {metadata != null && (\n            <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n              {metadata}\n            </div>\n          )}\n          {actions != null && (\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">{actions}</div>\n          )}\n          {children != null && <div className=\"mt-2\">{children}</div>}\n        </div>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["TimelineContext","React","timelineVariants","cva","TimelineRoot","className","size","density","children","props","ref","resolved","jsx","cn","STATUS_MARKER","DOT_SIZE","BADGE_SIZE","BADGE_ICON_PX","ITEM_PB","TimelineItem","timestamp","title","description","status","icon","metadata","actions","current","disabled","marker","jsxs","Timeline"],"mappings":"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"}

package/dist/components/ui/treemap/treemap.js

@@ -0,0 +1,83 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import * as x from "react";
+import { Treemap as T } from "recharts";
+import { cn as C } from "../../../lib/utils.js";
+import { ChartContainer as h, ChartTooltip as v, ChartTooltipContent as N } from "../chart/chart.js";
+function b({
+  x: o = 0,
+  y: l = 0,
+  width: t = 0,
+  height: a = 0,
+  name: e,
+  showLabels: s = !0
+}) {
+  if (!e) return /* @__PURE__ */ r("g", {});
+  const i = s && t > 64 && a > 28;
+  return /* @__PURE__ */ u("g", { children: [
+    /* @__PURE__ */ r(
+      "rect",
+      {
+        x: o,
+        y: l,
+        width: t,
+        height: a,
+        strokeWidth: 2,
+        className: "stroke-background",
+        style: { fill: `var(--color-${e})` }
+      }
+    ),
+    i && /* @__PURE__ */ r(
+      "text",
+      {
+        x: o + t / 2,
+        y: l + a / 2,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: "fill-[var(--ui-text-on-status-strong-neutral)] text-xs",
+        children: e
+      }
+    )
+  ] });
+}
+const k = x.forwardRef(
+  ({
+    className: o,
+    config: l,
+    data: t,
+    dataKey: a,
+    nameKey: e,
+    aspectRatio: s = 4 / 3,
+    showLabels: i = !0,
+    showTooltip: c = !0,
+    tooltipContent: m,
+    ...d
+  }, p) => {
+    const f = t.map((n) => ({
+      ...n,
+      fill: `var(--color-${n[e]})`
+    }));
+    return /* @__PURE__ */ r("div", { ref: p, className: C(o), ...d, children: /* @__PURE__ */ r(h, { config: l, className: "size-full", children: /* @__PURE__ */ r(
+      T,
+      {
+        data: f,
+        dataKey: a,
+        nameKey: e,
+        aspectRatio: s,
+        isAnimationActive: !1,
+        content: /* @__PURE__ */ r(b, { showLabels: i }),
+        children: c && /* @__PURE__ */ r(
+          v,
+          {
+            content: m ?? /* @__PURE__ */ r(N, { nameKey: e, hideLabel: !0 })
+          }
+        )
+      }
+    ) }) });
+  }
+);
+k.displayName = "Treemap";
+export {
+  k as Treemap,
+  b as TreemapCell
+};
+//# sourceMappingURL=treemap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid/legend, themed\n// through a custom `content` cell renderer (recharts' default paints every cell\n// the same fill and has no token hooks). Like Scatter/Composed/RadialBar there's\n// no CVA variant — a treemap's knobs are geometry (`aspectRatio`) and the data,\n// not a visual \"mode\". v1 is a flat treemap (a list of leaves).\n\ninterface TreemapCellProps {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  // recharts injects the node's resolved `name` (from nameKey) + value.\n  name?: string;\n  showLabels?: boolean;\n}\n\n// Cell renderer: fill each rect from its `--color-<name>` var, separate cells\n// with the surface color, and center a white label (readable over the saturated\n// series colors) when the cell is big enough. Passed to `Treemap.content`;\n// recharts clones it with each node's geometry + `name`.\nexport function TreemapCell({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  showLabels = true,\n}: TreemapCellProps) {\n  // recharts invokes `content` for the synthetic root node too (full chart\n  // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n  // `--color-<name>` fill and paints the SVG-default black behind everything\n  // (invisible when leaves cover it, a black box on empty data).\n  if (!name) return <g />;\n  const canLabel = showLabels && width > 64 && height > 28;\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        strokeWidth={2}\n        className=\"stroke-background\"\n        style={{ fill: `var(--color-${name})` }}\n      />\n      {canLabel && (\n        <text\n          x={x + width / 2}\n          y={y + height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          // The design system's \"text on a strong colored surface\" token\n          // (constant white in both themes) — reads over the saturated series\n          // colors without hardcoding a color.\n          className=\"fill-[var(--ui-text-on-status-strong-neutral)] text-xs\"\n        >\n          {name}\n        </text>\n      )}\n    </g>\n  );\n}\n\nexport interface TreemapProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-leaf data. Each object holds the leaf's `nameKey` label + its `dataKey` numeric size. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each leaf's rectangle. */\n  dataKey: string;\n  /**\n   * Label field that names each leaf (drives the on-cell label, tooltip, and\n   * `--color-<name>` lookup). Values should be unique and CSS-safe (they become\n   * part of a custom-property name).\n   */\n  nameKey: string;\n  /** Width-to-height ratio the tiling targets. */\n  aspectRatio?: number;\n  /** Render each leaf's name inside its cell (when it fits). */\n  showLabels?: boolean;\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-cell rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n    // per-cell color on the tooltip payload item.\n    const seriesData: Record<string, string | number>[] = data.map((row) => ({\n      ...row,\n      fill: `var(--color-${row[nameKey]})`,\n    }));\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsTreemap\n            data={seriesData}\n            dataKey={dataKey}\n            nameKey={nameKey}\n            aspectRatio={aspectRatio}\n            isAnimationActive={false}\n            content={<TreemapCell showLabels={showLabels} />}\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n          </RechartsTreemap>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"names":["TreemapCell","x","y","width","height","name","showLabels","jsx","canLabel","Treemap","React","className","config","data","dataKey","nameKey","aspectRatio","showTooltip","tooltipContent","props","ref","seriesData","row","cn","ChartContainer","RechartsTreemap","ChartTooltip","ChartTooltipContent"],"mappings":";;;;;AAkCO,SAASA,EAAY;AAAA,EAC1B,GAAAC,IAAI;AAAA,EACJ,GAAAC,IAAI;AAAA,EACJ,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,MAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AAKnB,MAAI,CAACD,EAAM,QAAO,gBAAAE,EAAC,KAAA,CAAA,CAAE;AACrB,QAAMC,IAAWF,KAAcH,IAAQ,MAAMC,IAAS;AACtD,2BACG,KAAA,EACC,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAAN;AAAA,QACA,GAAAC;AAAA,QACA,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,aAAa;AAAA,QACb,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,eAAeC,CAAI,IAAA;AAAA,MAAI;AAAA,IAAA;AAAA,IAEvCG,KACC,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGN,IAAIE,IAAQ;AAAA,QACf,GAAGD,IAAIE,IAAS;AAAA,QAChB,YAAW;AAAA,QACX,kBAAiB;AAAA,QAIjB,WAAU;AAAA,QAET,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAmCA,MAAMI,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc,IAAI;AAAA,IAClB,YAAAV,IAAa;AAAA,IACb,aAAAW,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAgDR,EAAK,IAAI,CAACS,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIP,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAR,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWG,EAAGZ,CAAS,GAAI,GAAGQ,GAC3C,UAAA,gBAAAZ,EAACiB,GAAA,EAAe,QAAAZ,GAAgB,WAAU,aACxC,UAAA,gBAAAL;AAAA,MAACkB;AAAAA,MAAA;AAAA,QACC,MAAMJ;AAAA,QACN,SAAAP;AAAA,QACA,SAAAC;AAAA,QACA,aAAAC;AAAA,QACA,mBAAmB;AAAA,QACnB,SAAS,gBAAAT,EAACP,GAAA,EAAY,YAAAM,EAAA,CAAwB;AAAA,QAE7C,UAAAW,KACC,gBAAAV;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,SACER,KACE,gBAAAX,EAACoB,GAAA,EAAoB,SAAAZ,GAAkB,WAAS,GAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MAGvD;AAAA,IAAA,GAGN,EAAA,CACF;AAAA,EAEJ;AACF;AACAN,EAAQ,cAAc;"}

package/dist/components/ui/trend-indicator/trend-indicator.js

@@ -0,0 +1,97 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ArrowRightIcon as I, ArrowTrendDownIcon as N, ArrowTrendUpIcon as T } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as h } from "../../../lib/utils.js";
+import { Tooltip as w, TooltipTrigger as k, TooltipContent as z } from "../tooltip/tooltip.js";
+const R = b(
+  "inline-flex items-center align-middle font-medium [&_svg]:shrink-0",
+  {
+    variants: {
+      sentiment: {
+        positive: "text-[var(--ui-text-on-status-success)]",
+        negative: "text-[var(--ui-text-on-status-danger)]",
+        neutral: "text-[var(--ui-text-on-status-neutral)]"
+      },
+      size: {
+        small: "gap-0.5 text-xs [&_svg]:size-3.5",
+        medium: "gap-1 text-sm [&_svg]:size-4"
+      },
+      variant: {
+        inline: "",
+        badge: "rounded-sm px-1.5 py-0.5"
+      }
+    },
+    // The badge tint pairs with the same status family as the text color.
+    compoundVariants: [
+      {
+        variant: "badge",
+        sentiment: "positive",
+        className: "bg-[var(--ui-background-status-success)]"
+      },
+      {
+        variant: "badge",
+        sentiment: "negative",
+        className: "bg-[var(--ui-background-status-danger)]"
+      },
+      {
+        variant: "badge",
+        sentiment: "neutral",
+        className: "bg-[var(--ui-background-status-neutral)]"
+      }
+    ],
+    defaultVariants: {
+      sentiment: "neutral",
+      size: "medium",
+      variant: "inline"
+    }
+  }
+), _ = {
+  up: T,
+  down: N,
+  flat: I
+}, y = u.forwardRef(
+  ({
+    className: m,
+    direction: e,
+    sentiment: a,
+    size: g,
+    variant: p,
+    value: n,
+    comparisonLabel: r,
+    tooltip: s,
+    showIcon: v = !0,
+    ariaLabel: i,
+    ...x
+  }, o) => {
+    const f = _[e], l = s != null, d = /* @__PURE__ */ c(
+      "span",
+      {
+        "data-direction": e,
+        "data-sentiment": a ?? "neutral",
+        className: h(
+          R({ sentiment: a, size: g, variant: p }),
+          m
+        ),
+        ...i ? { role: "img", "aria-label": i } : {},
+        tabIndex: l ? 0 : void 0,
+        ...x,
+        children: [
+          v && /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "rtl:-scale-x-100" }),
+          n != null && /* @__PURE__ */ t("span", { className: "tabular-nums", children: n }),
+          r != null && /* @__PURE__ */ t("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: r })
+        ]
+      }
+    );
+    return l ? /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ t(k, { ref: o, render: d }),
+      /* @__PURE__ */ t(z, { children: s })
+    ] }) : u.cloneElement(d, { ref: o });
+  }
+);
+y.displayName = "TrendIndicator";
+export {
+  y as TrendIndicator,
+  R as trendIndicatorVariants
+};
+//# sourceMappingURL=trend-indicator.js.map

package/dist/components/ui/trend-indicator/trend-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-indicator.js","sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value + an optional comparison label. It deliberately\n// separates `direction` (what happened mathematically) from `sentiment`\n// (whether that change is good or bad), because the kit can't assume up = good —\n// revenue ↑ is positive, threats ↑ is negative, MTTR ↓ is positive. The consumer\n// computes both and passes an already-formatted `value`; this component never\n// diffs two numbers, rounds, or interprets domain rules. Sentiment drives the\n// color through the semantic status text tokens (the glyph inherits via\n// `currentColor`), and the `badge` variant adds a matching status tint — no new\n// tokens.\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center align-middle font-medium [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n      size: {\n        small: 'gap-0.5 text-xs [&_svg]:size-3.5',\n        medium: 'gap-1 text-sm [&_svg]:size-4',\n      },\n      variant: {\n        inline: '',\n        badge: 'rounded-sm px-1.5 py-0.5',\n      },\n    },\n    // The badge tint pairs with the same status family as the text color.\n    compoundVariants: [\n      {\n        variant: 'badge',\n        sentiment: 'positive',\n        className: 'bg-[var(--ui-background-status-success)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'negative',\n        className: 'bg-[var(--ui-background-status-danger)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'neutral',\n        className: 'bg-[var(--ui-background-status-neutral)]',\n      },\n    ],\n    defaultVariants: {\n      sentiment: 'neutral',\n      size: 'medium',\n      variant: 'inline',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`, `\"4.2 h → 2.8 h\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Secondary comparison caption — e.g. `\"vs previous quarter\"`, `\"YoY\"`. */\n  comparisonLabel?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` / `comparisonLabel` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      size,\n      variant,\n      value,\n      comparisonLabel,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(\n          trendIndicatorVariants({ sentiment, size, variant }),\n          className\n        )}\n        // With an explicit sentence, the whole unit is one labelled image and\n        // the inner text/glyph is decorative; otherwise the visible text carries\n        // the meaning and the glyph is hidden.\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        // When it's a tooltip trigger, make it keyboard-reachable so the hint\n        // isn't hover-only.\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n        {comparisonLabel != null && (\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {comparisonLabel}\n          </span>\n        )}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        {/* Base UI's Trigger ref is typed to its default <button>; the trigger\n            here is the span, so the runtime ref is that span. */}\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"names":["trendIndicatorVariants","cva","DIRECTION_ICON","ArrowTrendUpIcon","ArrowTrendDownIcon","ArrowRightIcon","TrendIndicator","React","className","direction","sentiment","size","variant","value","comparisonLabel","tooltip","showIcon","ariaLabel","props","ref","Icon","hasTooltip","root","jsxs","cn","jsx","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;AAuBA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA,IAGF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAKMC,IAAiB;AAAA,EACrB,IAAIC;AAAA,EACJ,MAAMC;AAAA,EACN,MAAMC;AACR,GA4BMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOlB,EAAeO,CAAS,GAC/BY,IAAaN,KAAW,MAExBO,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBd;AAAA,QAChB,kBAAgBC,KAAa;AAAA,QAC7B,WAAWc;AAAA,UACTxB,EAAuB,EAAE,WAAAU,GAAW,MAAAC,GAAM,SAAAC,GAAS;AAAA,UACnDJ;AAAA,QAAA;AAAA,QAKD,GAAIS,IAAY,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAc,CAAA;AAAA,QAG5D,UAAUI,IAAa,IAAI;AAAA,QAC1B,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAF,KAAY,gBAAAS,EAACL,GAAA,EAAK,eAAW,IAAC,WAAU,oBAAmB;AAAA,UAC3DP,KAAS,QAAQ,gBAAAY,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAZ,GAAM;AAAA,UACvDC,KAAmB,QAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,8CACb,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKN,WAAKO,sBAKFK,GAAA,EAGC,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAe,KAAAR,GAA0C,QAAQG,EAAA,CAAM;AAAA,MACxE,gBAAAG,EAACG,KAAgB,UAAAb,EAAA,CAAQ;AAAA,IAAA,GAC3B,IATOR,EAAM,aAAae,GAAM,EAAE,KAAAH,GAAK;AAAA,EAW3C;AACF;AACAb,EAAe,cAAc;"}