{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter",
  "type": "registry:ui",
  "title": "Meter",
  "description": "A level in a range as a row of LED segments coloured by position (green, amber, red); a change sweeps segment by segment from the old edge to the new.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/meter/meter.tsx",
      "type": "registry:ui",
      "target": "components/metalui/meter/meter.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Meter as BaseMeter } from '@base-ui/react/meter';\n\n/* ─────────────────────────────────────────────────────────\n * METER, a level in a range, on Base UI Meter\n *\n *   rest      a row of LED segments (16); lit up to the value, dark (the off lamp) above it\n *   colour    by where a segment sits, not by the value: green, amber from 75 %, red from 90 %\n *             toward the bad end (the top; the bottom for bad=\"low\", like a battery)\n *   change    the level sweeps from its old edge to its new one, one segment every 16 ms, each\n *             lamp fading 90 ms: rising lights upward, falling darkens downward\n *   text      an optional label at the left above, the value at the right\n * Reduce Motion: every segment changes at once (the stagger is scaled by the part travel).\n * The lamps are the LED part's looks; the meter recipe adds the segments and the sweep.\n * ───────────────────────────────────────────────────────── */\n\nconst ROOT = 'mu-meter grid min-w-meter-min-width gap-meter-head-gap';\nconst HEAD = 'mu-meter-head flex items-baseline justify-between gap-meter-head-gap';\nconst LABEL = 'mu-meter-label type-ui text-ink';\nconst VALUE = 'mu-meter-value type-meta tabular-nums text-ink2';\nconst TRACK = 'mu-meter-track flex gap-meter-gap h-meter-height';\nconst SEGMENT = 'mu-meter-segment relative flex-1 rounded-meter-radius recipe-status-led-off';\nconst ZONE = { ok: 'recipe-status-led-live', warn: 'recipe-status-led recipe-status-led-waiting', danger: 'recipe-status-led recipe-status-led-failed' };\n\nexport interface MeterProps extends Omit<BaseMeter.Root.Props, 'className' | 'children'> {\n  /** What is measured: \"Storage\". Shown above, and names it. */\n  label?: React.ReactNode;\n  /** Show the value (a percentage by default) at the right above the segments. */\n  showValue?: boolean;\n  /** How many segments (16). */\n  segments?: number;\n  /** Where amber and red begin, as shares of the range measured from the bad end (0.75 and 0.9). */\n  warn?: number;\n  danger?: number;\n  /** Which end of the scale is the problem: high (storage, the default) or low (battery). */\n  bad?: 'high' | 'low';\n  className?: string;\n}\n\n/** A level in a range, as lit segments. */\nexport function Meter({ label, showValue, segments = 16, warn = 0.75, danger = 0.9, bad = 'high', value, min = 0, max = 100, className, ...props }: MeterProps) {\n  const lit = Math.round(((value - min) / (max - min || 1)) * segments);\n  const before = React.useRef(lit);\n  const from = before.current;\n  React.useEffect(() => { before.current = lit; }, [lit]);\n  return (\n    <BaseMeter.Root value={value} min={min} max={max} className={className ? `${ROOT} ${className}` : ROOT} {...props}>\n      {(label != null || showValue) && (\n        <span className={HEAD}>\n          {label != null ? <BaseMeter.Label className={LABEL}>{label}</BaseMeter.Label> : <span />}\n          {showValue && <BaseMeter.Value className={VALUE} />}\n        </span>\n      )}\n      <BaseMeter.Track className={TRACK}>\n        {Array.from({ length: segments }, (_, i) => {\n          const share = bad === 'low' ? (segments - i) / segments : (i + 1) / segments;\n          const zone = share > danger ? 'danger' : share > warn ? 'warn' : 'ok';\n          // Segments between the old edge and the new one change in order, away from the old edge.\n          const step = lit >= from ? i - from : from - 1 - i;\n          return (\n            <span key={i} aria-hidden className={SEGMENT} data-lit={i < lit ? '' : undefined} data-zone={zone} style={{ '--mu-meter-step': Math.max(0, step) } as React.CSSProperties}>\n              <span className={`mu-meter-lamp meter-lamp ${ZONE[zone]}`} />\n            </span>\n          );\n        })}\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/meter.md. SwiftUI: MetalMeter in the MetalUI Swift package."
}