{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter",
  "title": "Meter",
  "description": "Static measurement bar (role=meter) for a known range, with optional segments.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/meter/meter.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst meterFillVariants = cva(\"h-full transition-all\", {\n  defaultVariants: {\n    variant: \"default\",\n  },\n  variants: {\n    variant: {\n      default: \"bg-primary\",\n      destructive: \"bg-destructive\",\n      secondary: \"bg-secondary-foreground\",\n    },\n  },\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/** Props for the {@link Meter} component. */\nexport type MeterProps = {\n  /** Accessible label naming the measured quantity. */\n  label?: string;\n  /** Upper bound of the measured range. Defaults to `100`. */\n  max?: number;\n  /** Lower bound of the measured range. Defaults to `0`. */\n  min?: number;\n  /** Split the bar into this number of discrete blocks instead of a solid fill. */\n  segments?: number;\n  /** Current measured value (clamped to `min`/`max`). */\n  value: number;\n  /** Human-readable description of the current value (`aria-valuetext`). */\n  valueText?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n  VariantProps<typeof meterFillVariants>;\n\n/**\n * Static measurement bar for a known range (disk usage, score, capacity).\n * Uses `role=\"meter\"` — distinct from a progress bar, which reports task\n * completion over time.\n * @example\n * <Meter label=\"Disk usage\" value={72} valueText=\"72% used\" />\n */\nconst Meter = ({\n  className,\n  label,\n  max = 100,\n  min = 0,\n  ref,\n  segments,\n  value,\n  valueText,\n  variant,\n  ...props\n}: MeterProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const safeMax = max > min ? max : min + 1;\n  const current = clamp(value, min, safeMax);\n  const ratio = (current - min) / (safeMax - min);\n  const percentage = ratio * 100;\n  const segmentCount = segments !== undefined && segments > 0 ? segments : 0;\n  const filledSegments = Math.round(ratio * segmentCount);\n\n  return (\n    <div\n      aria-label={label}\n      aria-valuemax={safeMax}\n      aria-valuemin={min}\n      aria-valuenow={current}\n      aria-valuetext={valueText}\n      className={cn(\n        \"h-2 w-full overflow-hidden rounded-full bg-muted\",\n        segmentCount > 0 && \"flex gap-0.5 bg-transparent\",\n        className,\n      )}\n      ref={ref}\n      role=\"meter\"\n      {...props}\n    >\n      {segmentCount > 0 ? (\n        Array.from({ length: segmentCount }, (_cell, index) => (\n          <div\n            className={cn(\n              \"h-full flex-1 rounded-full\",\n              index < filledSegments\n                ? meterFillVariants({ variant })\n                : \"bg-muted\",\n            )}\n            key={`meter-segment-${index}`}\n          />\n        ))\n      ) : (\n        <div\n          className={meterFillVariants({ variant })}\n          style={{ width: `${percentage}%` }}\n        />\n      )}\n    </div>\n  );\n};\nMeter.displayName = \"Meter\";\n\nexport { Meter, meterFillVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}