{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "liquid-fill-chart",
  "title": "Liquid Fill Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/charts/liquid-fill-chart/LiquidFillChart.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  /** Fill 0..100. */\n  value: number\n  /** Container height. Default 220. */\n  height?: number | string\n  /** Wave colour. Defaults to chart-1 token. */\n  color?: string\n  /** Show the % label in the centre. Default true. */\n  showLabel?: boolean\n  unit?: string\n  class?: HTMLAttributes['class']\n  /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 220,\n  color: 'var(--chart-1)',\n  showLabel: true,\n  unit: '%',\n})\n\nconst pct = computed(() => Math.max(0, Math.min(100, props.value)))\nconst heightStyle = computed(() => (/^\\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))\n// Wave offset: waterline rises as pct grows. Two phase-shifted paths give depth.\nconst level = computed(() => 100 - pct.value * 0.72)\nconst uid = `lf-${Math.random().toString(36).slice(2, 8)}`\n</script>\n\n<template>\n  <div\n    data-slot=\"liquid-fill-chart\"\n    role=\"img\"\n    tabindex=\"0\"\n    :aria-label=\"ariaLabel || `Liquid fill chart at ${Math.round(pct)}${unit}`\"\n    :style=\"{ height: heightStyle }\"\n    :class=\"\n      cn(\n        'focus-visible:ring-ring flex w-full items-center justify-center focus-visible:ring-2 focus-visible:outline-none',\n        props.class,\n      )\n    \"\n  >\n    <svg viewBox=\"0 0 200 200\" class=\"aspect-square h-full max-h-full\" role=\"presentation\">\n      <defs>\n        <clipPath :id=\"uid\">\n          <circle cx=\"100\" cy=\"100\" r=\"84\" />\n        </clipPath>\n      </defs>\n      <circle cx=\"100\" cy=\"100\" r=\"88\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" class=\"text-border\" />\n      <g :clip-path=\"`url(#${uid})`\">\n        <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" class=\"fill-muted/40\" />\n        <path\n          :d=\"`M 0 ${level} Q 25 ${level - 10}, 50 ${level} T 100 ${level} T 150 ${level} T 200 ${level} V 200 H 0 Z`\"\n          :fill=\"color\"\n          opacity=\"0.55\"\n        >\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"translate\"\n            from=\"0 0\"\n            to=\"-100 0\"\n            dur=\"6s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n        <path\n          :d=\"`M 0 ${level + 6} Q 25 ${level - 4}, 50 ${level + 6} T 100 ${level + 6} T 150 ${level + 6} T 200 ${level + 6} V 200 H 0 Z`\"\n          :fill=\"color\"\n          opacity=\"0.85\"\n        >\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"translate\"\n            from=\"-100 0\"\n            to=\"0 0\"\n            dur=\"4s\"\n            repeatCount=\"indefinite\"\n          />\n        </path>\n      </g>\n      <text\n        v-if=\"showLabel\"\n        x=\"100\"\n        y=\"104\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        class=\"fill-foreground\"\n        font-size=\"30\"\n        font-weight=\"700\"\n      >\n        {{ Math.round(pct) }}{{ unit }}\n      </text>\n    </svg>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/liquid-fill-chart/LiquidFillChart.vue"
    },
    {
      "path": "packages/registry-vue/components/charts/liquid-fill-chart/index.ts",
      "content": "export { default as LiquidFillChart } from './LiquidFillChart.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/liquid-fill-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Liquid fill gauge as dependency-free SVG. Animated dual waves rise to the value inside a ring with a centred label. Picks up chart tokens via CSS variables.",
  "categories": [
    "chart"
  ]
}