{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "liquid-fill-chart",
  "title": "Liquid Fill Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/liquid-fill-chart/LiquidFillChart.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface LiquidFillChartProps extends HTMLAttributes<HTMLDivElement> {\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    /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n    ariaLabel?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    value,\n    height = 220,\n    color = 'var(--chart-1)',\n    showLabel = true,\n    unit = '%',\n    ariaLabel,\n    class: className,\n    ref = $bindable(null),\n    ...restProps\n  }: LiquidFillChartProps = $props()\n\n  const pct = $derived(Math.max(0, Math.min(100, value)))\n  const heightStyle = $derived(/^\\d+$/.test(String(height)) ? `${height}px` : String(height))\n  // Wave offset: waterline rises as pct grows. Two phase-shifted paths give depth.\n  const level = $derived(100 - pct * 0.72)\n  const uid = `lf-${Math.random().toString(36).slice(2, 8)}`\n</script>\n\n<!-- Focusable chart image mirrors the Vue twin for keyboard users. -->\n<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\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={cn(\n    'focus-visible:ring-ring flex w-full items-center justify-center focus-visible:ring-2 focus-visible:outline-none',\n    className,\n  )}\n  {...restProps}\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    {#if showLabel}\n      <text\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    {/if}\n  </svg>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/liquid-fill-chart/LiquidFillChart.svelte"
    },
    {
      "path": "packages/registry-svelte/components/liquid-fill-chart/index.ts",
      "content": "export { default as LiquidFillChart, type LiquidFillChartProps } from './LiquidFillChart.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/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"
  ]
}