Metric

{
  "type": "object",
  "properties": {
    "type": {
      "const": "Metric",
      "default": "Metric",
      "type": "string"
    },
    "id": {
      "type": [
        "string",
        "null"
      ],
      "default": null,
      "description": "HTML id attribute for CSS targeting. Applied to the outermost element."
    },
    "cssClass": {
      "type": [
        "string",
        "null"
      ],
      "default": null,
      "description": "CSS/Tailwind classes for styling. Accepts a Responsive() for breakpoint-aware classes."
    },
    "onMount": {
      "default": null,
      "description": "Action(s) to execute when this component mounts."
    },
    "label": {
      "description": "The metric name",
      "type": "string"
    },
    "value": {
      "anyOf": [
        {
          "type": "integer"
        },
        {
          "type": "number"
        },
        {
          "type": "string"
        }
      ],
      "description": "The headline number"
    },
    "description": {
      "type": [
        "string",
        "null"
      ],
      "default": null,
      "description": "Optional description text"
    },
    "delta": {
      "anyOf": [
        {
          "type": "integer"
        },
        {
          "type": "number"
        },
        {
          "type": "string"
        },
        {
          "type": "null"
        }
      ],
      "default": null,
      "description": "Change indicator (e.g. '+23.4%', -15)"
    },
    "trend": {
      "enum": [
        "up",
        "down",
        "neutral"
      ],
      "type": [
        "string",
        "null"
      ],
      "default": null,
      "description": "Arrow direction: 'up', 'down', or 'neutral'. Inferred from delta if None."
    },
    "trendSentiment": {
      "enum": [
        "positive",
        "negative",
        "neutral"
      ],
      "type": [
        "string",
        "null"
      ],
      "default": null,
      "description": "Color: 'positive' (green), 'negative' (red), 'neutral' (muted). Inferred from trend if None."
    }
  },
  "required": [
    "type",
    "label",
    "value"
  ]
}