@lotics/ui 40.0.0 → 41.0.0

package/MIGRATION.md

@@ -4,6 +4,48 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 41.0.0 — `RingGauge` is `ProgressRing`, and circular progress is one component
+
+`RingGauge` is **deleted**. `ProgressRing` replaces it and covers both what it did and the
+bare arc it could not.
+
+```diff
+- import { RingGauge } from "@lotics/ui/ring_gauge";
++ import { ProgressRing } from "@lotics/ui/progress_ring";
+
+- <RingGauge value={87} label="On time" caption="33 of 38 deliveries" />
++ <ProgressRing value={87} label="On time" caption="33 of 38 deliveries" />
+```
+
+For that shape nothing else changes — same 140px default, same figure, same label column.
+
+**What is new is the other end of the axis.** `format="none"` with no label leaves the arc
+bare, at any size, which is what makes one component enough:
+
+```tsx
+<ProgressRing value={15200} max={1000000} size={16} format="none" />
+```
+
+**Why it had to be one.** `RingGauge` and `ProgressBar` were the same concept in two
+geometries built to two APIs — the ring took 0–100 where the bar takes `value`/`max`, hardcoded
+`Math.round(value)%` in its centre where the bar has a `format` axis, and *required* a label
+where the bar's title is optional. Reaching for a second, smaller ring component made the
+duplication obvious rather than fixing it. `ProgressRing` now mirrors `ProgressBar`: a reader
+who knows one knows the other.
+
+Two consequences of that mirroring worth knowing:
+
+- **Pass the real pair, not a percentage.** `value`/`max` (default `max: 100`, so an existing
+  0–100 value still reads directly). The arc and the figure then derive from the same untouched
+  numbers, which is how they stay in agreement.
+- **`thickness` derives from `size`** — 10% of the diameter, floored at 2 — because no fixed
+  default serves both 16 and 140, and 14 at icon scale is absurd. The centre figure's type
+  scales the same way. Both are still overridable.
+
+A bare ring renders no text and so announces nothing to a screen reader. That is correct for a
+decoration inside a labelled control, and it means a bare ring must never be the only thing
+carrying a meaning — whatever owns it says what it measures.
+
 ## 40.0.0 — `PopoverContent` decides its own presentation; `small` is gone
 
 `PopoverContent` took a `small` prop meaning "render as a bottom sheet". It now asks

package/docs/catalog.md

@@ -209,7 +209,7 @@ Two columnar shapes, and the choice is about data size:
 `KPIStrip` (the dashboard stat band), `SummaryLine` (the light inline register/list summary
 — below the toolbar, from the filtered rows), `KPICard` / `Metric` (headline figures),
 `TrendChip` (delta), `Sparkline`, `BarChart` / `LineChart` / `PieChart` (the canonical SVG
-set — no recharts), `RingGauge`, `ProgressBar` (its `compact` prop = ONE row, track + a
+set — no recharts), `ProgressRing`, `ProgressBar` (its `compact` prop = ONE row, track + a
 plain sm tabular count beside it — the cell/heading/peek-trigger meter; a caption floating
 above a tiny bar reads misaligned. **The track clamps at 100%, the caption does not** — over
 its max it reads `2,100 / 2,000 (105%)`, because a meter that says "100%" when you are over
@@ -1329,9 +1329,17 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`sparkline`** — `Sparkline`: the inline mini trend line.
 - **`bar_chart`** / **`line_chart`** / **`pie_chart`** — `BarChart` / `LineChart` /
   `PieChart`: the canonical SVG chart set (no recharts).
-- **`ring_gauge`** — `RingGauge`: single-fraction circular gauge.
 - **`progress_bar`** — `ProgressBar`: the determinate meter; `compact` = ONE row, track + a
   plain sm tabular count beside it.
+- **`progress_ring`** — `ProgressRing`: the same meter in a circle, and the ONLY circular one
+  (it replaced `RingGauge`). Same API shape as the bar — a real `value`/`max` rather than a
+  pre-computed percentage, optional `label`/`caption`, and a `format` that turns the centre
+  figure off. `format="none"` with no label leaves the arc bare at any size: that is the
+  TRIGGER form, for a control row where a figure would be unreadable and a bar would not
+  read. `thickness` derives from `size` (10%, floored at 2) because no fixed default serves
+  both 16 and 140, and the centre figure's type scales with the ring for the same reason. A
+  bare ring renders no text, so it announces nothing — whatever owns it must say what it
+  measures.
 - **`stacked_progress_bar`** — `StackedProgressBar`: one whole split across segments (a
   status mix on one bar).
 - **`step_progress`** — `StepProgress`: N-of-M dots/segments progress. A real `progressbar`
@@ -1569,7 +1577,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   nothing pushes back, so a 720p capture measurably widened a 342px chat column to 367px
   the moment it loaded. **Do not add your own fullscreen/expand control**: the native
   transport already carries fullscreen, picture-in-picture and download, and a second
-  affordance beside them is both redundant and a claim about where it leads. Native renders
+  affordance beside them is both redundant and a claim about where it leads. A source it
+  cannot load is surfaced, never silent — a media element that fails paints an EMPTY BOX and
+  reports nothing, so an expired serving token is indistinguishable from a feature that never
+  produced a file; on error it renders a retryable notice filling the same box instead
+  (`mediaPlayer` locale slice, worded agnostically because the kit does not know whether it is
+  showing a recording, a clip or an attachment). Failure is remembered per SOURCE, so swapping
+  `src` presents the new one rather than inheriting the old one's error, and the retry remounts
+  the element — a re-render alone does not re-request the source. **`onError` reports the failure
+  with the HTTP STATUS**, not just the `MediaError`: a lapsed token, a missing file and an
+  unplayable codec all arrive as code 4, so the code alone cannot say which happened. The player
+  resolves the status by re-requesting the source, and only when an `onError` is supplied — the
+  kit carries no analytics, so the host decides whether the answer is worth a request. Native renders
   the `notAvailable` placeholder — playback there needs a native media dep the package does
   not carry.
 - **`media_player_types`** — `MediaPlayerProps`; types only.

package/docs/templates.md

@@ -142,7 +142,7 @@ the pipeline (`StackedProgressBar`, blue = pipeline), a **Needs attention** `Acc
 (icon + label + count `Badge`; expanding opens the records behind the count, each row
 carrying its domain `⋯ ActionMenu`), top customers (`Avatar` + revenue + margin badge; the
 name `Peek`s the dossier). Also exercises the wider chart family (`LineChart`, `PieChart`,
-`RingGauge`, `Sparkline`, `TrendFooter`, `Funnel`) and `DateRangeFilterField` — the date
+`ProgressRing`, `Sparkline`, `TrendFooter`, `Funnel`) and `DateRangeFilterField` — the date
 filter actually filters the KPI datasets. Start here for any "state of the operation"
 landing screen.
 

package/examples/tpl_dashboard.tsx

@@ -15,7 +15,7 @@ import { Badge } from "@lotics/ui/badge";
 import { BarChart } from "@lotics/ui/bar_chart";
 import { LineChart } from "@lotics/ui/line_chart";
 import { PieChart } from "@lotics/ui/pie_chart";
-import { RingGauge } from "@lotics/ui/ring_gauge";
+import { ProgressRing } from "@lotics/ui/progress_ring";
 import { Sparkline } from "@lotics/ui/sparkline";
 import { TrendFooter } from "@lotics/ui/trend_footer";
 import { Button } from "@lotics/ui/button";
@@ -405,7 +405,7 @@ export function TplDashboard() {
               </CardHeaderTitle>
             </CardHeader>
             <View style={{ paddingHorizontal: 20, paddingVertical: 16, flex: 1, alignItems: "center", justifyContent: "center" }}>
-              <RingGauge value={87} label="On time" caption="33 of 38 deliveries" color={solid("emerald")} />
+              <ProgressRing value={87} label="On time" caption="33 of 38 deliveries" color={solid("emerald")} />
             </View>
           </Card>
         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "40.0.0",
+  "version": "41.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -73,7 +73,7 @@
     "./format_money": "./src/format_money.ts",
     "./calendar": "./src/calendar/index.ts",
     "./gantt": "./src/gantt/index.ts",
-    "./ring_gauge": "./src/ring_gauge.tsx",
+    "./progress_ring": "./src/progress_ring.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./legend_item": "./src/legend_item.tsx",
     "./breakdown": "./src/breakdown.tsx",

package/src/locale.tsx

@@ -114,6 +114,12 @@ export interface LoticsLocale {
    *  (open/download/remove + the confirm), the gallery chrome (close, prev/next,
    *  rotate), and the preview captions (not-available / load-failed / password). */
   gallery: GalleryLabels;
+  /** `MediaPlayer`: the caption when a source will not load. Its own slice
+   *  rather than the `gallery` one, whose wording is "preview" — true of
+   *  `FilePreview` and wrong everywhere else the player is used, and a single
+   *  string cannot mean both. Agnostic on purpose: the kit does not know
+   *  whether it is showing a recording, a clip or an attachment. */
+  mediaPlayer: { loadFailed: string };
   /** `Avatar`: the fallback name (initials + a11y label) shown when no `name`. */
   avatar: { unknown: string };
   /** `BackButton` + `PopoverNavHeader`: the back-chevron's a11y name. */
@@ -306,6 +312,7 @@ export const en: LoticsLocale = {
     selectDateRange: "Select date range", selectDate: "Select date",
     clear: "Clear", done: "Done", placeholder: "All time",
   },
+  mediaPlayer: { loadFailed: "Failed to load media" },
   gallery: {
     close: "Close",
     previous: "Previous",
@@ -494,6 +501,7 @@ export const vi: LoticsLocale = {
     download: "Tải xuống",
     passwordProtected: "Tệp có mật khẩu — không xem trước được",
   },
+  mediaPlayer: { loadFailed: "Không tải được nội dung" },
   avatar: { unknown: "Không rõ" },
   nav: { back: "Quay lại" },
   chart: { noData: "Không có dữ liệu", total: "Tổng" },

package/src/media_player.web.tsx

@@ -1,4 +1,10 @@
+import { useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Button } from "./button";
+import { Icon } from "./icon";
+import { Text } from "./text";
 import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
 import type { MediaPlayerProps } from "./media_player_types";
 
 /**
@@ -17,16 +23,68 @@ import type { MediaPlayerProps } from "./media_player_types";
  * caller composes the box and this draws inside it.
  */
 export function MediaPlayer(props: MediaPlayerProps) {
-  const { src, kind, accessibilityLabel, testID } = props;
+  const { src, kind, accessibilityLabel, onError, testID } = props;
+  const l = useLoticsLocale();
+  // Bumped to REMOUNT the element on retry. Clearing the flag alone leaves the
+  // failed element in place, and a media element does not re-request its source
+  // just because it re-rendered.
+  const [attempt, setAttempt] = useState(0);
+  // The failed SOURCE, not a boolean: this component keeps its position when a
+  // caller swaps `src` (a gallery stepping to the next clip), and a boolean
+  // would carry the previous file's failure onto a file that was never tried.
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  const failed = failedSrc === src;
+
+  const handleError = (element: HTMLMediaElement) => {
+    setFailedSrc(src);
+    // Only probe when someone is listening — the host pays a request for the
+    // answer, so it is not spent when nothing reads it.
+    if (!onError) return;
+    const code = element.error?.code ?? null;
+    void resolveStatus(src).then((status) => onError({ status, code }));
+  };
+
+  /**
+   * A media element that cannot load its source renders an EMPTY BOX and says
+   * nothing — no pixel changes, no message, nothing to act on. An expired
+   * file-serving token was indistinguishable from "the feature never recorded
+   * anything", for a recording that was intact on disk the whole time. Whatever
+   * the cause, a failed load has to be visible and retryable.
+   */
+  if (failed) {
+    const notice = (
+      <View testID={testID ? `${testID}-error` : undefined} style={styles.error}>
+        <Icon name="circle-alert" size={20} color={colors.zinc["400"]} />
+        <Text size="sm" color="muted">
+          {l.mediaPlayer.loadFailed}
+        </Text>
+        <Button
+          title={l.errorState.retry}
+          color="secondary"
+          onPress={() => {
+            setFailedSrc(null);
+            setAttempt((n) => n + 1);
+          }}
+        />
+      </View>
+    );
+    // Video fills a box the caller sized, so the notice has to fill it too or
+    // the frame half-empties on failure. The wrapper is a flex container for
+    // exactly that reason — measured, `flex: 1` inside the default block box
+    // left the notice 50px tall in a 206px frame.
+    return kind === "video" ? <div style={videoWrapperStyle}>{notice}</div> : notice;
+  }
 
   if (kind === "audio") {
     return (
       <audio
+        key={attempt}
         data-testid={testID}
         aria-label={accessibilityLabel}
         controls
         preload="metadata"
         src={src}
+        onError={(e) => handleError(e.currentTarget)}
         style={audioStyle}
       />
     );
@@ -44,21 +102,52 @@ export function MediaPlayer(props: MediaPlayerProps) {
   return (
     <div style={videoWrapperStyle}>
       <video
+        key={attempt}
         data-testid={testID}
         aria-label={accessibilityLabel}
         controls
         preload="metadata"
         src={src}
+        onError={(e) => handleError(e.currentTarget)}
         style={videoStyle}
       />
     </div>
   );
 }
 
+const styles = StyleSheet.create({
+  error: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: colors.zinc["100"],
+  },
+});
+
+/**
+ * The status behind a failed load. A media element never exposes it — every
+ * transport failure arrives as the same opaque `MediaError` — so the only way to
+ * tell an expired token from a broken file is to ask again and read the code.
+ * Null means even that could not be determined (offline, or a source this
+ * origin may not read), which is itself the useful answer.
+ */
+async function resolveStatus(src: string): Promise<number | null> {
+  try {
+    const res = await fetch(src, { method: "HEAD", credentials: "include" });
+    return res.status;
+  } catch {
+    return null;
+  }
+}
+
 // Inline rather than StyleSheet: these land on DOM elements, not RN views.
 const audioStyle = { width: "100%" } as const;
 const videoWrapperStyle = {
   position: "relative",
+  display: "flex",
   width: "100%",
   height: "100%",
   overflow: "hidden",

package/src/media_player_types.ts

@@ -1,3 +1,18 @@
+/**
+ * Why a source would not play.
+ *
+ * The media element's own `MediaError` is nearly useless on its own: a 401, a
+ * 404 and a genuinely unplayable codec all surface as code 4
+ * (`SRC_NOT_SUPPORTED`). The STATUS is what separates "the session lapsed" from
+ * "this file is broken", so the player resolves it before reporting.
+ */
+export interface MediaLoadFailure {
+  /** HTTP status of the source, or null when it could not be determined. */
+  status: number | null;
+  /** `MediaError.code` — 1 aborted, 2 network, 3 decode, 4 unsupported. */
+  code: number | null;
+}
+
 export interface MediaPlayerProps {
   /** Already-served URL for the media — signing/auth is the host's problem. */
   src: string;
@@ -9,5 +24,12 @@ export interface MediaPlayerProps {
   kind: "audio" | "video";
   /** Accessible name for the player. Required: an unlabelled one is a blank control. */
   accessibilityLabel: string;
+  /**
+   * Called once when a source fails to load. The player already SHOWS the
+   * failure; this is for the host to report it, because the kit carries no
+   * analytics of its own. Omit it and no status probe is performed — the work
+   * only happens when someone is listening.
+   */
+  onError?: (failure: MediaLoadFailure) => void;
   testID?: string;
 }

package/src/progress_bar.tsx

@@ -26,6 +26,17 @@ export interface ProgressBarProps {
    * and the percentage too, which is how a 99.6%-full meter starts claiming it is exactly full.
    */
   formatValue?: (n: number) => string;
+  /**
+   * How the PERCENTAGE in the caption renders, given `value / max` as a fraction
+   * (which can exceed 1 — see the clamping note below). Defaults to whole points.
+   *
+   * Separate from `formatValue` because they answer different questions and a
+   * caller needs both: `formatValue` reshapes the two amounts, this reshapes the
+   * ratio between them. Without it a surface that renders percentages of its own
+   * cannot make them agree with this one — a meter reading "(2%)" beside a row
+   * reading "1,5%", where both are 1.52%, is the same number twice in one panel.
+   */
+  formatPercent?: (fraction: number) => string;
   color?: string;
   completeColor?: string;
   /** COMPACT: one row — the track (flex) with a plain sm tabular count beside
@@ -48,6 +59,7 @@ export function ProgressBar(props: ProgressBarProps) {
     title,
     format = "percentage",
     formatValue,
+    formatPercent,
     color = colors.blue["500"],
     completeColor = colors.green["500"],
     compact = false,
@@ -67,10 +79,13 @@ export function ProgressBar(props: ProgressBarProps) {
   const percentage = Math.min(100, ratio);
   const isComplete = ratio >= 100;
   const num = formatValue ?? ((n: number) => n.toLocaleString(localeTag));
+  const pct = formatPercent
+    ? (r: number) => formatPercent(r / 100)
+    : (r: number) => `${Math.round(r)}%`;
 
   if (compact) {
     const label =
-      format === "percentage" ? `${Math.round(ratio)}%` : `${num(value)}/${num(max)}`;
+      format === "percentage" ? pct(ratio) : `${num(value)}/${num(max)}`;
     return (
       <View style={styles.compactRow}>
         <View style={[styles.track, styles.compactTrack]}>
@@ -87,9 +102,9 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const caption =
     format === "fraction"
-      ? `${num(value)} / ${num(max)} (${Math.round(ratio)}%)`
+      ? `${num(value)} / ${num(max)} (${pct(ratio)})`
       : format === "percentage"
-        ? `${Math.round(ratio)}%`
+        ? pct(ratio)
         : null;
 
   return (

package/src/progress_ring.tsx

@@ -0,0 +1,148 @@
+import { View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+
+export type ProgressRingFormat = "percentage" | "none";
+
+export interface ProgressRingProps {
+  value: number;
+  /** What `value` is a fraction OF. Default 100, so a value already expressed
+   *  as a percentage reads directly. Pass the real pair (tokens used / window,
+   *  slots filled / slots) rather than pre-computing: the arc and the figure
+   *  then derive from the same untouched numbers, which is how they stay in
+   *  agreement. */
+  max?: number;
+  /** Diameter in px. Default 140 — the dashboard figure. Drop to ~16 for a
+   *  control row or a trigger, where the arc is the whole content. */
+  size?: number;
+  /** Ring stroke. Derived from `size` when unset — 10% of the diameter, floored
+   *  at 2px so a small ring still paints. A fixed default cannot serve both
+   *  scales: 14 is right at 140 and absurd at 16. */
+  thickness?: number;
+  /** Short label under the ring. */
+  label?: string;
+  /** One-line context under the label. */
+  caption?: string;
+  /** What the CENTRE shows. `none` leaves the arc bare — the trigger form,
+   *  where a figure would be unreadable anyway. */
+  format?: ProgressRingFormat;
+  /** Arc color. */
+  color?: string;
+  /** The unfilled remainder. */
+  trackColor?: string;
+}
+
+/** The centre figure only reads at dashboard scale; below that it must shrink
+ *  with the ring or it overflows the circle it sits in. */
+function centreTextSize(size: number): "sm" | "lg" | "xxl" | "xxxl" {
+  if (size >= 120) return "xxxl";
+  if (size >= 88) return "xxl";
+  if (size >= 56) return "lg";
+  return "sm";
+}
+
+/**
+ * Circular progress — the ring form of `ProgressBar`, and the ONLY one.
+ *
+ * Same concept, different geometry, so it takes the same shape of API: a real
+ * `value`/`max` rather than a pre-computed percentage, optional `label` and
+ * `caption` slots, and a `format` that can turn the figure off entirely. A
+ * reader who knows the bar knows this.
+ *
+ * The `format="none"` end of that axis is what makes one component enough. At
+ * trigger scale the arc IS the content — no figure, no label, nothing to read —
+ * and at dashboard scale the figure leads with the label beneath it. That was
+ * two components (`RingGauge` and a bare ring) until the second one made it
+ * obvious they were one component with a suppressed centre.
+ *
+ * With `format="none"` and no label it renders no text at all, so it announces
+ * nothing to a screen reader. That is correct for a decoration inside a labelled
+ * control — but it means a bare ring must never be the only thing carrying a
+ * meaning: whatever owns it says what it measures.
+ *
+ * Implementation: native HTML `<svg>` (like `Sparkline`) — Vite can't resolve
+ * react-native-svg's native paths, and the `<View>` wrapper preserves the RN
+ * layout surface. The arc starts at 12 o'clock (`rotate(-90)`) and grows
+ * clockwise via `strokeDasharray`.
+ */
+export function ProgressRing(props: ProgressRingProps) {
+  const {
+    value,
+    max = 100,
+    size = 140,
+    thickness = Math.max(2, size * 0.1),
+    label,
+    caption,
+    format = "percentage",
+    color = colors.teal[600],
+    trackColor = colors.zinc[100],
+  } = props;
+
+  // The ARC clamps — an arc longer than its own circle is meaningless — while
+  // the figure reports the true ratio, the same split `ProgressBar` makes. A
+  // ring reading 100% while the number says 130% is the honest rendering of
+  // being over.
+  const ratio = max > 0 ? (value / max) * 100 : 0;
+  const clamped = Math.max(0, Math.min(100, ratio));
+  const center = size / 2;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dash = (clamped / 100) * circumference;
+
+  const ring = (
+    <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: "absolute" }}>
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={trackColor}
+          strokeWidth={thickness}
+        />
+        {/* A zero-length dash still paints a dot under `round` caps, which reads
+            as progress where there is none. Omit the arc entirely at 0. */}
+        {clamped > 0 ? (
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={thickness}
+            strokeLinecap="round"
+            strokeDasharray={`${dash} ${circumference}`}
+            transform={`rotate(-90 ${center} ${center})`}
+          />
+        ) : null}
+      </svg>
+      {format === "percentage" ? (
+        <Text size={centreTextSize(size)} weight="semibold">
+          {`${Math.round(ratio)}%`}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  // No label and no caption is the trigger form: the ring alone, with none of
+  // the column's centring or gap to shift it inside a control row.
+  if (!label && !caption) return ring;
+
+  return (
+    <View style={{ alignItems: "center", gap: 12 }}>
+      {ring}
+      <View style={{ alignItems: "center", gap: 2 }}>
+        {label ? (
+          <Text size="md" weight="semibold">
+            {label}
+          </Text>
+        ) : null}
+        {caption ? (
+          <Text size="sm" color="muted">
+            {caption}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/vite.mjs

@@ -22,7 +22,7 @@
  *
  * Why each family is here:
  *  - `react-native-svg` — @lotics/ui's svg charts (PieChart/LineChart/Sparkline/
- *    RingGauge) reach a named-export entry the dev optimizer won't resolve
+ *    ProgressRing) reach a named-export entry the dev optimizer won't resolve
  *    unbundled ("does not provide an export named 'parse'").
  *  - `react-native-web` + `@react-native/normalize-colors` + the `inline-style-
  *    prefixer` / `fbjs` / `styleq` / `postcss-value-parser` / `nullthrows` core —

package/src/ring_gauge.tsx

@@ -1,72 +0,0 @@
-import { View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-
-export interface RingGaugeProps {
-  /** Progress value, 0–100. Clamped to that range. */
-  value: number;
-  /** Short label under the ring. */
-  label: string;
-  /** Optional one-line context under the label. */
-  caption?: string;
-  /** Diameter in px. Default 128. */
-  size?: number;
-  /** Ring stroke width in px. Default 14 — thinner reads weak. */
-  thickness?: number;
-  /** Arc color. Default teal accent. */
-  color?: string;
-}
-
-/**
- * Circular progress gauge — an at-a-glance ring for a 0–100% metric
- * (on-time rate, SLA compliance, win rate). The percentage leads in the
- * center; the track behind it shows the remaining-to-100 context. Pairs
- * with `KPICard` (figures) — use a ring when the number IS a ratio to 100.
- *
- * Implementation: native HTML `<svg>` (like `Sparkline`) — Vite can't
- * resolve react-native-svg's native paths, and the `<View>` wrapper
- * preserves the RN layout surface. The arc starts at 12 o'clock
- * (`rotate(-90)`) and grows clockwise via `strokeDasharray`.
- */
-export function RingGauge(props: RingGaugeProps) {
-  const { value, label, caption, size = 140, thickness = 14, color = colors.teal[600] } = props;
-  const clamped = Math.max(0, Math.min(100, value));
-  const center = size / 2;
-  const radius = (size - thickness) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const dash = (clamped / 100) * circumference;
-
-  return (
-    <View style={{ alignItems: "center", gap: 12 }}>
-      <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
-        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: "absolute" }}>
-          <circle cx={center} cy={center} r={radius} fill="none" stroke={colors.zinc[100]} strokeWidth={thickness} />
-          <circle
-            cx={center}
-            cy={center}
-            r={radius}
-            fill="none"
-            stroke={color}
-            strokeWidth={thickness}
-            strokeLinecap="round"
-            strokeDasharray={`${dash} ${circumference}`}
-            transform={`rotate(-90 ${center} ${center})`}
-          />
-        </svg>
-        <Text size="xxxl" weight="semibold">
-          {Math.round(clamped)}%
-        </Text>
-      </View>
-      <View style={{ alignItems: "center", gap: 2 }}>
-        <Text size="md" weight="semibold">
-          {label}
-        </Text>
-        {caption ? (
-          <Text size="sm" color="muted">
-            {caption}
-          </Text>
-        ) : null}
-      </View>
-    </View>
-  );
-}