@acronis-platform/ui-react 4.1.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "4.1.0",
+  "version": "5.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"meter.js","names":[],"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"],"mappings":";;;;;;;AAiBA,IAAM,KAAiB,MAAkB,EAAM,eAAe,GA4BxD,IAAQ,EAAM,YAEhB,EACE,cACA,UACA,UACA,SAAM,KACN,UACA,oBAAiB,GACjB,iBAAc,IACd,YACA,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAM,IAAM,IAAI,KAAK,MAAO,IAAQ,IAAO,GAAG,IAAI,GAIlD,IAAU,IAAM,IAAI,IAAM,GAE1B,IACJ,kBAAC,EAAe,MAAhB;EACS;EACP,KAAK;EAIL,iBAAe;EACf,kBAAgB,GAAG,EAAe,CAAK,EAAE,MAAM,EAAe,CAAG,EAAE,IAAI,EAAI;EAI3E,UAAU,IAAc,IAAI,KAAA;EAC5B,WAAW,EAAG,gCAAgC,CAAS;EACvD,GAAI;EAbN,UAAA,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,EAAe,OAAhB;IAAsB,WAAU;IAC7B,UAAA;GACmB,CAAA,GACtB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA,EAAe,CAAK;IACjB,CAAA,GACN,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAAwC;MAAI;MAAI;KAAO;IACnD,CAAA,CAAA;GACH,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,EAAe,OAAhB;GAAsB,WAAU;GAE9B,UAAA,kBAAC,EAAe,WAAhB;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAM;GACjC,CAAA;EACmB,CAAA,CACH;;CAOvB,OAJK,IAKH,kBAAC,GAAD;EAAsB;EAAtB,UAAA,CACE,kBAAC,GAAD;GAGO;GACL,QAAQ;EACT,CAAA,GAID,kBAAC,GAAD;GACE,WAAW,EACT,gEACA,CAAC,KAAW,yBACd;GAEC,UAAA,KACC,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,EAAM;IACjC,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KAAiB,UAAA;IAAY,CAAA;IAC7C,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG,EAAe,CAAK;MAAE;MAAK,EAAe,CAAG;MAAE;MAAI;MAAI;KACpD;;GACN,EAAA,CAAA;EAEU,CAAA,CACT;MAjCF,EAAM,aAAa,GAAM,EAAE,OAAI,CAAC;AAmC3C,CACF;AACA,EAAM,cAAc"}

package/dist/llms/meter.md

@@ -1,177 +0,0 @@
-# Meter
-
-> A labelled bar showing a scalar value within a known range — a fractional value / share (`role="meter"`, mirroring the HTML `<meter>` element), as opposed to `Progress` which tracks a task over time. One row: label + `value · %` over a proportional track bar, with a hover tooltip; designed to be stacked into a ranked breakdown (a "bar list"). Design-pending v1 (no `--ui-chart-*` palette; the fill color is caller-supplied per row).
-
-**Status:** draft · **Category:** data-display · **Since:** v0.58.0
-
-## Import
-
-```tsx
-import { Meter } from '@acronis-platform/ui-react'
-```
-
-## Quick example
-
-```tsx
-<Meter
-  label="Critical"
-  value={6}
-  max={29}
-  color="var(--ui-background-status-strong-danger)"
-/>
-```
-
-A labelled proportional bar for a value within a known range — a fractional
-value / share. Built on Base UI's `Meter` (`role="meter"`, like the HTML
-`<meter>` element), as opposed to `Progress` / `ProgressCircle`, which track a
-task over time. One row: label + `value · %` over a track bar, with a hover
-tooltip; stack several to build a ranked breakdown (a "bar list").
-
-> **Design-pending v1.** No chart token tier yet, so the fill color is
-> **caller-supplied** per row via `color` (a dedicated `--ui-chart-*` data-viz
-> palette is a pending upstream design deliverable). The tooltip uses the
-> chart-tooltip look (light card). Code Connect deferred.
-
-## When to use
-
-- One row of a **breakdown** — a category's value and its share of a total,
-  with a proportional bar (severity split, top browsers, storage by type).
-- Stacked and sorted, as a ranked bar-list.
-
-## When not to use
-
-- Task progress over time (uploads, loading) — use
-  [`Progress`](/components/progress) / `ProgressCircle`.
-- Many categories compared without a part-to-whole reading — a bar chart.
-
-## Example
-
-```tsx
-import { Meter } from '@acronis-platform/ui-react';
-
-<Meter
-  label="Critical"
-  value={6}
-  max={29}
-  color="var(--ui-background-status-strong-danger)"
-/>;
-```
-
-Stack several sharing one `max` (the total), sorted by value, for a ranked
-breakdown:
-
-```tsx
-const rows = [
-  {
-    label: 'High',
-    value: 9,
-    color: 'var(--ui-background-status-strong-warning)',
-  },
-  {
-    label: 'Medium',
-    value: 8,
-    color: 'var(--ui-background-status-strong-info)',
-  },
-  {
-    label: 'Critical',
-    value: 6,
-    color: 'var(--ui-background-status-strong-danger)',
-  },
-];
-const total = rows.reduce((sum, r) => sum + r.value, 0);
-
-<div className="flex flex-col gap-4">
-  {rows
-    .sort((a, b) => b.value - a.value)
-    .map((r) => (
-      <Meter
-        key={r.label}
-        label={r.label}
-        value={r.value}
-        max={total}
-        color={r.color}
-      />
-    ))}
-</div>;
-```
-
-The fill color references an existing semantic `--ui-*` token; the status tokens
-are chromatic across brands, so they read consistently until the real data-viz
-palette lands.
-
-## Props
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `label` | `string` | — | yes | Row label shown on the left. |
-| `value` | `number` | — | yes | The value this meter represents. |
-| `max` | `number` | `100` | no | Upper bound of the range — the whole the value is a share of. |
-| `color` | `string` | — | yes | Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). Caller-supplied; there is no chart palette tier yet. |
-| `valueFormatter` | `(value: number) => string` | `toLocaleString` | no | Format the numeric value in the label + tooltip. |
-| `showTooltip` | `boolean` | `true` | no | Show the hover tooltip (`label · value of max · %`). |
-| `tooltip` | `ReactNode` | — | no | Custom tooltip content — replaces the default (dot + label + `value of max · %`) inside the same chart-style card. Ignored when `showTooltip` is false. |
-| `defaultOpen` | `boolean` | — | no | Render with the tooltip initially open (Base UI `defaultOpen`). |
-
-## Behavior
-
-`Meter` is a labelled proportional bar for a value within a range (Base UI
-`Meter`, `role="meter"`).
-
-```gherkin
-Scenario: Render a value's share
-  Given a label, value, and max
-  Then the fill spans value / max of the track (Base UI sizes the indicator)
-  And the row shows the formatted value and `· <pct>%` on the right
-  And the fill uses the caller-supplied color
-```
-
-```gherkin
-Scenario: Accessible value
-  Given value and max
-  Then the meter exposes role="meter" with aria-valuenow / aria-valuemin (0) /
-    aria-valuemax (max), an accessible name from the label, and an
-    aria-valuetext of "value of max (pct%)"
-```
-
-```gherkin
-Scenario: Tooltip on hover
-  Given showTooltip is true (the default)
-  When the user hovers or focuses the meter
-  Then a chart-style tooltip card (light surface + border + shadow) shows a color
-    dot, the label, and "value of max · pct%"
-  And with showTooltip false, no tooltip is wired
-```
-
-```gherkin
-Scenario: Zero or empty range
-  Given max is 0 (or value is 0)
-  Then the share reads 0% and the fill is empty, without dividing by zero
-```
-
-```gherkin
-Scenario: Stacked into a ranked breakdown
-  Given several meters sharing one max (the total), sorted by value
-  Then they read as a ranked bar-list of shares
-```
-
-## Accessibility
-
-- Built on Base UI `Meter`, so the root carries `role="meter"` with
-  `aria-valuenow` / `aria-valuemin` (0) / `aria-valuemax` (the `max`), an
-  accessible name wired from `Meter.Label` (`aria-labelledby`), and an
-  `aria-valuetext` giving the human-readable "value of max (pct%)".
-- `role="meter"` (not `progressbar`) is deliberate — a meter is a scalar value
-  within a known range, not task progress over time. Screen readers announce it
-  as a gauge/measurement.
-- The percentage and value are real text in the row, so the meaning is in the
-  accessible tree, not only the bar. **Don't rely on the fill color alone** to
-  distinguish stacked meters — pair each with its label (already shown).
-- The tooltip repeats the value/share; it's supplementary. When it's shown the
-  meter root is focusable (`tabIndex={0}`), so keyboard users reach it on focus,
-  not just hover. The bar's color is caller-supplied, so pick a token with enough
-  contrast on the surface.
-
-## Contrast
-
-The label, value, track, and tooltip resolve semantic `--ui-*` tokens that meet
-contrast in both themes. The fill color is the caller's responsibility.

package/dist/src/components/ui/meter/index.d.ts

@@ -1 +0,0 @@
-export { Meter, type MeterProps } from './meter';

package/dist/src/components/ui/meter/meter.d.ts

@@ -1,25 +0,0 @@
-import { Meter as MeterPrimitive } from '@base-ui/react/meter';
-import * as React from 'react';
-export interface MeterProps extends Omit<React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>, 'value' | 'color'> {
-    /** Row label shown on the left. */
-    label: string;
-    /** The value this meter represents. */
-    value: number;
-    /** Upper bound of the range — the whole the value is a share of. */
-    max?: number;
-    /** Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). */
-    color: string;
-    /** Format the numeric value (label + tooltip). Defaults to `toLocaleString()`. */
-    valueFormatter?: (value: number) => string;
-    /** Show the hover tooltip (`label · value of max · %`). */
-    showTooltip?: boolean;
-    /**
-     * Custom tooltip content — replaces the default (dot + label + `value of max
-     * · %`) inside the same chart-style card. Ignored when `showTooltip` is false.
-     */
-    tooltip?: React.ReactNode;
-    /** Render with the tooltip initially open (Base UI `defaultOpen`). */
-    defaultOpen?: boolean;
-}
-declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
-export { Meter };