@multiplatform.one/components 6.1.0 → 6.4.0

package/src/charts/series.tsx

@@ -0,0 +1,245 @@
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import type { ScaleBand, ScaleLinear } from "d3-scale";
+import { areaPath, arcPath, linePath, pieSlices } from "./math";
+import { Circle, G, Path, Rect, datumTargetProps } from "./svg";
+import type {
+  ChartCurve,
+  ChartDatum,
+  ChartDatumEvents,
+  ChartSize,
+  PixelPoint,
+  PlotArea,
+} from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+/**
+ * Series mark primitives. Marks are pure pixel-space SVG; every series takes
+ * pre-resolved fills (the composed charts resolve them from the canonical
+ * palette / explicit data colors, LC-27) and exposes tooltip-ready hit
+ * targets: invisible shapes floored at 44px (Axiom 12 / SP-FIXED) wired to
+ * `onDatumPress` / hover callbacks with per-datum accessible names.
+ */
+
+interface DatumTargetCallbacks extends ChartDatumEvents {
+  /** Accessible name per datum (describeDatum output). */
+  datumLabel?: (datum: ChartDatum, index: number) => string;
+}
+
+function targetPropsFor(callbacks: DatumTargetCallbacks, datum: ChartDatum, index: number) {
+  const { onDatumPress, onDatumHoverIn, onDatumHoverOut, datumLabel } = callbacks;
+  return datumTargetProps({
+    label: datumLabel?.(datum, index),
+    onPress: onDatumPress ? () => onDatumPress(datum, index) : undefined,
+    onHoverIn: onDatumHoverIn ? () => onDatumHoverIn(datum, index) : undefined,
+    onHoverOut: onDatumHoverOut ? () => onDatumHoverOut(datum, index) : undefined,
+  });
+}
+
+function hasTargets(callbacks: DatumTargetCallbacks): boolean {
+  return Boolean(
+    callbacks.onDatumPress ||
+    callbacks.onDatumHoverIn ||
+    callbacks.onDatumHoverOut ||
+    callbacks.datumLabel,
+  );
+}
+
+// ── Bar ───────────────────────────────────────────────────────
+
+export interface BarSeriesProps extends DatumTargetCallbacks {
+  data: ChartDatum[];
+  xScale: ScaleBand<string>;
+  yScale: ScaleLinear<number, number>;
+  plot: PlotArea;
+  /** Resolved fill per datum index (palette or explicit data color). */
+  fills: string[];
+}
+
+/**
+ * Vertical bars from the zero baseline (negative values hang below it).
+ * Corner radius follows the borderRadius knob, clamped to bar anatomy.
+ * Hit target = the full column, floored at 44px width.
+ */
+export function BarSeries({ data, xScale, yScale, plot, fills, ...callbacks }: BarSeriesProps) {
+  const { barCornerRadius } = useChartTheme();
+  const bandwidth = xScale.bandwidth();
+  const baseline = yScale(Math.max(0, yScale.domain()[0]));
+  const interactive = hasTargets(callbacks);
+
+  return (
+    <G>
+      {data.map((datum, index) => {
+        const x = xScale(datum.label);
+        if (x === undefined) return null;
+        const valueY = yScale(datum.value);
+        const y = Math.min(valueY, baseline);
+        const height = Math.abs(valueY - baseline);
+        const radius = barCornerRadius(bandwidth, height);
+        const targetWidth = Math.max(bandwidth, MIN_PRESS_TARGET);
+        return (
+          <G key={`${datum.label}-${index}`}>
+            <Rect
+              x={x}
+              y={y}
+              width={bandwidth}
+              height={height}
+              fill={fills[index]}
+              rx={radius}
+              ry={radius}
+            />
+            {interactive ? (
+              <Rect
+                x={x + bandwidth / 2 - targetWidth / 2}
+                y={plot.y}
+                width={targetWidth}
+                height={plot.height}
+                fill="transparent"
+                {...targetPropsFor(callbacks, datum, index)}
+              />
+            ) : null}
+          </G>
+        );
+      })}
+    </G>
+  );
+}
+
+// ── Line ──────────────────────────────────────────────────────
+
+export interface LineSeriesProps extends DatumTargetCallbacks {
+  data: ChartDatum[];
+  /** Pixel positions aligned with `data`. */
+  points: PixelPoint[];
+  color: string;
+  strokeWidth?: number;
+  curve?: ChartCurve;
+  /** Draw a dot on each datum (default true). */
+  showPoints?: boolean;
+  pointRadius?: number;
+  /**
+   * Surface bounds — hit-target circles are clamped inside so the 44px floor
+   * stays fully tappable at the edges (SVG clips overflowing targets).
+   */
+  bounds?: ChartSize;
+}
+
+function clampTargetCenter(value: number, radius: number, extent?: number): number {
+  if (extent === undefined || extent < radius * 2) return value;
+  return Math.min(Math.max(value, radius), extent - radius);
+}
+
+/**
+ * Stroked data line with optional per-datum dots. Hit targets are invisible
+ * 44px-diameter circles centered on each datum.
+ */
+export function LineSeries({
+  data,
+  points,
+  color,
+  strokeWidth = 2,
+  curve = "linear",
+  showPoints = true,
+  pointRadius = 3,
+  bounds,
+  ...callbacks
+}: LineSeriesProps) {
+  const interactive = hasTargets(callbacks);
+  const targetRadius = MIN_PRESS_TARGET / 2;
+  return (
+    <G>
+      <Path d={linePath(points, { curve })} fill="none" stroke={color} strokeWidth={strokeWidth} />
+      {showPoints
+        ? points.map((point, index) => (
+            <Circle key={`point-${index}`} cx={point.x} cy={point.y} r={pointRadius} fill={color} />
+          ))
+        : null}
+      {interactive
+        ? points.map((point, index) => (
+            <Circle
+              key={`target-${index}`}
+              cx={clampTargetCenter(point.x, targetRadius, bounds?.width)}
+              cy={clampTargetCenter(point.y, targetRadius, bounds?.height)}
+              r={targetRadius}
+              fill="transparent"
+              {...targetPropsFor(callbacks, data[index], index)}
+            />
+          ))
+        : null}
+    </G>
+  );
+}
+
+// ── Area ──────────────────────────────────────────────────────
+
+export interface AreaSeriesProps {
+  /** Pixel positions of the series top edge. */
+  points: PixelPoint[];
+  /** Pixel y of the area baseline (usually the plot bottom). */
+  baseline: number;
+  color: string;
+  /** Fill opacity — the line above carries full identity (default 0.18). */
+  opacity?: number;
+  curve?: ChartCurve;
+}
+
+/**
+ * Filled area under a series. Non-interactive by design — pair it with a
+ * LineSeries on top, which owns points and hit targets.
+ */
+export function AreaSeries({ points, baseline, color, opacity = 0.18, curve }: AreaSeriesProps) {
+  return <Path d={areaPath(points, { baseline, curve })} fill={color} opacity={opacity} />;
+}
+
+// ── Pie / Donut ───────────────────────────────────────────────
+
+export interface PieSeriesProps extends DatumTargetCallbacks {
+  data: ChartDatum[];
+  /** Center x/y in surface pixels. */
+  cx: number;
+  cy: number;
+  outerRadius: number;
+  /** > 0 renders a donut with a true transparent hole. */
+  innerRadius?: number;
+  /** Radians between slices (default 0). */
+  padAngle?: number;
+  /** Resolved fill per datum index. */
+  fills: string[];
+}
+
+/**
+ * Pie/donut slices in data order (never re-sorted — order is data). The hit
+ * target is the slice path itself; slice geometry cannot be floored to 44px
+ * without lying about the data, so thin-slice precision is a documented
+ * touch limitation (legend rows remain the accessible alternative).
+ */
+export function PieSeries({
+  data,
+  cx,
+  cy,
+  outerRadius,
+  innerRadius = 0,
+  padAngle = 0,
+  fills,
+  ...callbacks
+}: PieSeriesProps) {
+  const slices = pieSlices(data, { padAngle });
+  const interactive = hasTargets(callbacks);
+  return (
+    <G transform={`translate(${cx}, ${cy})`}>
+      {slices.map((slice) => (
+        <Path
+          key={`${slice.datum.label}-${slice.index}`}
+          d={arcPath({
+            startAngle: slice.startAngle,
+            endAngle: slice.endAngle,
+            padAngle: slice.padAngle,
+            innerRadius,
+            outerRadius,
+          })}
+          fill={fills[slice.index]}
+          {...(interactive ? targetPropsFor(callbacks, slice.datum, slice.index) : {})}
+        />
+      ))}
+    </G>
+  );
+}

package/src/charts/svg.ts

@@ -0,0 +1,84 @@
+/**
+ * SVG rendering bridge for charts.
+ *
+ * All chart marks render through `@tamagui/react-native-svg`, which is a
+ * platform-split shim already shipped by this package (icons use it today):
+ *
+ * - web → thin `createElement("rect" | "path" | …)` wrappers, i.e. plain
+ *   inline DOM SVG — no react-native-svg needed in web bundles, works in the
+ *   web Storybook (Vite) as-is;
+ * - native → re-exports the real `react-native-svg` (optional peer of this
+ *   package; already installed by the apps), so the native Storybook renders
+ *   the same components through RNSVG.
+ *
+ * The shim ships no types, so exports are cast to the react-native-svg
+ * component types (same pattern as `images/Svg`): props are written in the
+ * RNSVG dialect, whose attribute names mirror React-DOM's camelCase SVG
+ * attributes, keeping one prop spelling valid on both renderers.
+ */
+
+import {
+  Circle as TCircle,
+  G as TG,
+  Line as TLine,
+  Path as TPath,
+  Rect as TRect,
+  Svg as TSvg,
+  Text as TSvgText,
+} from "@tamagui/react-native-svg";
+import { isWeb } from "@multiplatform.one/platform";
+import type {
+  Circle as RNCircle,
+  G as RNG,
+  Line as RNLine,
+  Path as RNPath,
+  Rect as RNRect,
+  Svg as RNSvg,
+  Text as RNSvgText,
+} from "react-native-svg";
+
+export const Svg = TSvg as unknown as typeof RNSvg;
+export const G = TG as unknown as typeof RNG;
+export const Rect = TRect as unknown as typeof RNRect;
+export const Circle = TCircle as unknown as typeof RNCircle;
+export const Line = TLine as unknown as typeof RNLine;
+export const Path = TPath as unknown as typeof RNPath;
+export const SvgText = TSvgText as unknown as typeof RNSvgText;
+
+/** Accessible-image props for the chart root (Axiom 12). */
+export function chartRootA11yProps(label: string): Record<string, unknown> {
+  if (isWeb) return { role: "img", "aria-label": label };
+  return { accessible: true, accessibilityRole: "image", accessibilityLabel: label };
+}
+
+export interface DatumTargetInput {
+  /** Per-datum accessible name (describeDatum output). */
+  label?: string;
+  onPress?: () => void;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+}
+
+/**
+ * Platform event/a11y props for an invisible per-datum hit target.
+ * Web: click + mouse hover on the DOM node. Native: RNSVG press responder
+ * (pressIn/pressOut stand in for hover — tooltip-on-touch semantics).
+ */
+export function datumTargetProps(input: DatumTargetInput): Record<string, unknown> {
+  const interactive = Boolean(input.onPress || input.onHoverIn || input.onHoverOut);
+  if (isWeb) {
+    return {
+      ...(input.label ? { role: "img", "aria-label": input.label } : {}),
+      ...(input.onPress ? { onClick: input.onPress, cursor: "pointer" } : {}),
+      ...(input.onHoverIn ? { onMouseEnter: input.onHoverIn } : {}),
+      ...(input.onHoverOut ? { onMouseLeave: input.onHoverOut } : {}),
+      ...(interactive ? { pointerEvents: "auto" } : {}),
+    };
+  }
+  return {
+    ...(input.label ? { accessible: true, accessibilityLabel: input.label } : {}),
+    ...(input.onPress ? { onPress: input.onPress } : {}),
+    ...(input.onHoverIn ? { onPressIn: input.onHoverIn } : {}),
+    ...(input.onHoverOut ? { onPressOut: input.onHoverOut } : {}),
+  };
+}

package/src/charts/types.ts

@@ -0,0 +1,54 @@
+/**
+ * Chart data contracts shared by the headless math core, the SVG primitives,
+ * and the composed charts.
+ *
+ * `ChartDatum` is intentionally shape-compatible with the existing
+ * `ChartDataPoint` (views/Dashboard) and ReportBuilder's
+ * `{ label, value }` rows so surfaces can migrate without data mapping.
+ */
+
+export interface ChartDatum {
+  /** Category / point label (x identity for band charts). */
+  label: string;
+  /** Numeric value (y). */
+  value: number;
+  /**
+   * Explicit data color — a value, not chrome (Axiom 11 VALUE IS DATA).
+   * Passes through untouched; never restyled by theme or palette.
+   */
+  color?: string;
+}
+
+/** A resolved pixel-space point (post-scale). */
+export interface PixelPoint {
+  x: number;
+  y: number;
+}
+
+/** Measured drawing viewport handed to chart content by ChartSurface. */
+export interface ChartSize {
+  width: number;
+  height: number;
+}
+
+/** Plot rectangle inside the surface after axis margins are reserved. */
+export interface PlotArea {
+  /** Left edge (px). */
+  x: number;
+  /** Top edge (px). */
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type ChartCurve = "linear" | "monotone" | "natural" | "step";
+
+/** Per-datum interaction callbacks (tooltip-ready targets). */
+export interface ChartDatumEvents {
+  /** Press / click on a datum target. */
+  onDatumPress?: (datum: ChartDatum, index: number) => void;
+  /** Pointer enters a datum target (web hover; native pressIn). */
+  onDatumHoverIn?: (datum: ChartDatum, index: number) => void;
+  /** Pointer leaves a datum target (web hover out; native pressOut). */
+  onDatumHoverOut?: (datum: ChartDatum, index: number) => void;
+}

package/src/charts/useChartTheme.ts

@@ -0,0 +1,128 @@
+/**
+ * Chart chrome theming — the one channel (Axiom 5 ONE SOURCE).
+ *
+ * SVG attributes need resolved color/font strings, not Tamagui tokens, so
+ * this hook resolves the chart chrome from the live theme + knobs exactly
+ * once per chart:
+ *
+ * - series colors come ONLY from `useChartPalette()` (LC-27) — explicit
+ *   data colors pass through untouched at the call sites;
+ * - axis/grid/label chrome maps the componentColors roles (border `$color6`,
+ *   divider `$color4`, muted text `$color11`) through `useTheme().val`, so
+ *   chrome re-anchors under schemes and tints like every other surface;
+ * - label typography follows the `bodyFont` + `size` knobs (family resolved
+ *   from the Tamagui font config — KNOB-TOTALITY for text inside SVG);
+ * - `transition` carries the animation knob (undefined at `none`/PRM via
+ *   `useResolvedKnobs`) so draw-in motion stops per A-CONTINUOUS;
+ * - `barCornerRadius` steps with the borderRadius knob and clamps at the
+ *   mark's own anatomy (R-CLAMP: never past half the bar).
+ */
+
+import { useChartPalette, useResolvedKnobs, type ChartPalette } from "@multiplatform.one/theme";
+import * as Colors from "@tamagui/colors";
+import { useMemo } from "react";
+import {
+  getConfig,
+  getVariableValue,
+  useTheme as useTamaguiTheme,
+  useThemeName,
+  type TransitionProp,
+} from "tamagui";
+
+export interface ChartTheme {
+  scheme: "light" | "dark";
+  /** Canonical series palette (LC-27 CHART-PALETTE). */
+  palette: ChartPalette;
+  /** Axis line + tick marks (border role, `$color6`). */
+  axisColor: string;
+  /** Grid lines (divider role, `$color4`). */
+  gridColor: string;
+  /** Tick/legend label fill (muted text role, `$color11` — AA floor). */
+  labelColor: string;
+  /** Resolved body-font family for SVG text (bodyFont knob). */
+  labelFontFamily?: string;
+  /** Label size stepped by the size knob (11/12/13). */
+  labelFontSize: number;
+  /** Animation-knob transition; undefined at `none` / reduced motion. */
+  transition?: TransitionProp;
+  /** True when draw-in / continuous motion may play (A-CONTINUOUS). */
+  animationEnabled: boolean;
+  /** Bar corner radius from the borderRadius knob, clamped to anatomy. */
+  barCornerRadius: (bandWidth: number, barHeight: number) => number;
+}
+
+const labelFontSizeBySizeToken: Record<string, number> = {
+  $3: 11,
+  $4: 12,
+  $5: 13,
+};
+
+/** borderRadius knob → bar corner radius px (pre-clamp). */
+const barRadiusByKnob: Record<string, number> = {
+  $0: 0,
+  $2: 2,
+  $4: 3,
+  $6: 5,
+  $12: Number.POSITIVE_INFINITY,
+};
+
+function resolveFontFamily(fontToken: unknown): string | undefined {
+  if (typeof fontToken !== "string") return undefined;
+  try {
+    const fonts = getConfig()?.fontsParsed as
+      | Record<string, { family?: unknown } | undefined>
+      | undefined;
+    const family = fonts?.[fontToken]?.family;
+    const value = getVariableValue(family as Parameters<typeof getVariableValue>[0]);
+    return typeof value === "string" ? value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function useChartTheme(): ChartTheme {
+  const { knobProps } = useResolvedKnobs();
+  const palette = useChartPalette();
+  const themeName = useThemeName() as string | undefined;
+  const theme = useTamaguiTheme() as unknown as Record<string, { val?: string } | undefined>;
+  const scheme: "light" | "dark" = themeName?.startsWith("dark") ? "dark" : "light";
+
+  // Same last-resort strategy as chartPalette: sanctioned ramp constants,
+  // used only when the live theme is unreadable (SSR pre-hydration).
+  const gray = scheme === "dark" ? Colors.grayDark : Colors.gray;
+  const axisColor = theme.color6?.val ?? gray.gray6;
+  const gridColor = theme.color4?.val ?? gray.gray4;
+  const labelColor = theme.color11?.val ?? gray.gray11;
+
+  const bodyFontToken = knobProps.body.fontFamily;
+  const sizeToken = String(knobProps.sizeToken);
+  const radiusToken = String(knobProps.borderRadius.borderRadius);
+  const transition = knobProps.transition;
+
+  return useMemo(() => {
+    const barRadiusBase = barRadiusByKnob[radiusToken] ?? 3;
+    return {
+      scheme,
+      palette,
+      axisColor,
+      gridColor,
+      labelColor,
+      labelFontFamily: resolveFontFamily(bodyFontToken),
+      labelFontSize: labelFontSizeBySizeToken[sizeToken] ?? 12,
+      transition,
+      animationEnabled: transition !== null && transition !== undefined,
+      barCornerRadius: (bandWidth: number, barHeight: number) =>
+        Math.max(0, Math.min(barRadiusBase, bandWidth / 2, barHeight / 2)),
+    };
+  }, [
+    scheme,
+    palette,
+    axisColor,
+    gridColor,
+    labelColor,
+    bodyFontToken,
+    sizeToken,
+    radiusToken,
+    transition,
+  ]);
+}

package/src/code/Code/index.tsx

@@ -9,7 +9,6 @@ const CodeFrame = styled(Paragraph, {
   render: "code",
   fontFamily: "$mono",
   size: "$3",
-  lineHeight: 18,
   cursor: "inherit",
   whiteSpace: "pre",
   padding: "$1",
@@ -27,13 +26,31 @@ const CodeFrame = styled(Paragraph, {
 
 export const Code = CodeFrame.styleable((props, ref) => {
   const { knobProps } = useResolvedKnobs();
-  return <CodeFrame ref={ref} {...knobProps.borderRadius} {...knobProps.body} {...props} />;
+  // Code content is always the mono code font with normal tracking — the
+  // bodyFont/fontWeight knobs must never restyle code text (LC-07), and
+  // $mono's own size-scale letterSpacing (3px at $5) is display tracking,
+  // not code. Type scale still follows the size knob (T-VALUE via
+  // sizeToken, LC-18) — LC-07 immunity covers font knobs only.
+  return (
+    <CodeFrame
+      ref={ref}
+      {...knobProps.borderRadius}
+      size={knobProps.sizeToken as CodeProps["size"]}
+      {...props}
+      fontFamily="$mono"
+      letterSpacing={0}
+    />
+  );
 });
 
-export const CodeInline = styled(Paragraph, {
+const CodeInlineFrame = styled(Paragraph, {
   name: "CodeInline",
   render: "code",
   fontFamily: "$mono",
+  // letter-spacing inherits in CSS: without this pin, inline code picks up
+  // the surrounding prose tracking (font-knob condensed curves included)
+  // while block code stays immune. Code text is always normal-tracked mono.
+  letterSpacing: 0,
   color: componentColors.code.foreground,
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
@@ -46,6 +63,23 @@ export const CodeInline = styled(Paragraph, {
   whiteSpace: "pre",
 });
 
+// Inline code sizes relative to the surrounding prose (percentage font), so
+// the size knob reaches it through its context; only the radius surface is
+// owned chrome (R-SCALE, spec "Code and CodeInline").
+export const CodeInline = CodeInlineFrame.styleable((props, ref) => {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <CodeInlineFrame
+      ref={ref}
+      {...knobProps.borderRadius}
+      borderWidth={0}
+      {...props}
+      fontFamily="$mono"
+      letterSpacing={0}
+    />
+  );
+});
+
 export type CodeProps = GetProps<typeof CodeFrame>;
 
-export type CodeInlineProps = GetProps<typeof CodeInline>;
+export type CodeInlineProps = GetProps<typeof CodeInlineFrame>;

package/src/code/CodeBlock/index.tsx

@@ -7,9 +7,10 @@
  */
 
 import { LinearGradient } from "@tamagui/linear-gradient";
-import { CheckCircleIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { CheckCircleIcon, ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { ScrollView } from "tamagui";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
@@ -46,7 +47,11 @@ export function CodeBlock({
   disableCopy,
   size,
 }: CodeBlockProps) {
+  const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  // Content type scale follows the size knob (T-VALUE via sizeToken, LC-18);
+  // an explicit size prop ejects.
+  const codeSize = (size ?? knobProps.sizeToken) as any;
   const codeText = children.trim();
   const tokens = useShikiTokens(codeText, language, theme);
 
@@ -54,7 +59,7 @@ export function CodeBlock({
   const showLineNumbers = propShowLineNumbers ?? lines > 10;
   const isLong = lines > 22;
   const [isCutoff, setIsCutoff] = useState(isLong);
-  const { hasCopied, onCopy } = useClipboard(codeText);
+  const { hasCopied, hasCopyFailed, onCopy } = useClipboard(codeText);
 
   return (
     <YStack position="relative" marginBottom="$4">
@@ -94,14 +99,15 @@ export function CodeBlock({
               <Code
                 backgroundColor="transparent"
                 flex={1}
+                borderWidth={0}
                 {...knobProps.panelPadding}
-                {...knobProps.body}
-                size={(size ?? "$5") as any}
+                size={codeSize}
               >
                 <HighlightedCode
                   tokens={tokens}
                   highlightLines={highlightLines}
                   showLineNumbers={showLineNumbers}
+                  fontSize={codeSize}
                 >
                   {codeText}
                 </HighlightedCode>
@@ -109,14 +115,24 @@ export function CodeBlock({
             </ScrollView>
           </Pre>
           {!disableCopy && (
-            <XStack position="absolute" top="$3" right="$3">
-              <TooltipSimple label={hasCopied ? "Copied" : "Copy to clipboard"}>
+            <XStack position="absolute" top="$3" insetInlineEnd="$3">
+              <TooltipSimple
+                label={
+                  hasCopied
+                    ? t("Copied")
+                    : hasCopyFailed
+                      ? t("Copy failed")
+                      : t("Copy to clipboard")
+                }
+              >
                 <Button
-                  aria-label="Copy code to clipboard"
+                  aria-label={t("Copy code to clipboard")}
                   size="$2"
-                  icon={hasCopied ? CheckCircleIcon : ClipboardIcon}
+                  icon={
+                    hasCopied ? CheckCircleIcon : hasCopyFailed ? WarningCircleIcon : ClipboardIcon
+                  }
                   onPress={onCopy}
-                  $xs={{
+                  $max-xs={{
                     display: "none",
                   }}
                 />