{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter",
  "title": "Meter",
  "description": "Frosted meter and progress bars.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/meter.tsx",
      "content": "\"use client\";\n\nimport { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport { type CSSProperties, type ReactNode, useEffect, useRef } from \"react\";\nimport { cx, mergeRefs } from \"./types\";\nimport \"./liquikit.css\";\n\ntype BarProps = {\n\tlabel?: ReactNode;\n\ttint?: string;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n};\n\nfunction useOffscreen() {\n\tconst root = useRef<HTMLDivElement>(null);\n\tuseEffect(() => {\n\t\tconst element = root.current;\n\t\tif (!element || typeof IntersectionObserver === \"undefined\") return;\n\t\tconst observer = new IntersectionObserver(([entry]) => {\n\t\t\telement.toggleAttribute(\"data-offscreen\", !entry.isIntersecting);\n\t\t});\n\t\tobserver.observe(element);\n\t\treturn () => observer.disconnect();\n\t}, []);\n\treturn root;\n}\n\nexport type MeterProps = Omit<\n\tBaseMeter.Root.Props,\n\t\"className\" | \"style\" | \"render\" | \"children\"\n> &\n\tBarProps;\n\nexport function Meter({\n\tlabel,\n\ttint,\n\tclassName,\n\tstyle,\n\tref,\n\t...rootProps\n}: MeterProps) {\n\tconst root = useOffscreen();\n\treturn (\n\t\t<BaseMeter.Root\n\t\t\t{...rootProps}\n\t\t\tref={mergeRefs(ref, root)}\n\t\t\tclassName={cx(\"glass-ui-bar\", className)}\n\t\t\tstyle={{ ...style, \"--bar-tint\": tint } as CSSProperties}\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<span className=\"glass-ui-bar__header\">\n\t\t\t\t\t<BaseMeter.Label className=\"glass-ui-field__label\">\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</BaseMeter.Label>\n\t\t\t\t\t<BaseMeter.Value className=\"glass-ui-bar__value\" />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<BaseMeter.Track className=\"glass-ui-bar__track\">\n\t\t\t\t<BaseMeter.Indicator className=\"glass-ui-bar__fill\" />\n\t\t\t</BaseMeter.Track>\n\t\t</BaseMeter.Root>\n\t);\n}\n\nexport type ProgressProps = Omit<\n\tBaseProgress.Root.Props,\n\t\"className\" | \"style\" | \"render\" | \"children\"\n> &\n\tBarProps;\n\nexport function Progress({\n\tlabel,\n\ttint,\n\tclassName,\n\tstyle,\n\tref,\n\t...rootProps\n}: ProgressProps) {\n\tconst root = useOffscreen();\n\treturn (\n\t\t<BaseProgress.Root\n\t\t\t{...rootProps}\n\t\t\tref={mergeRefs(ref, root)}\n\t\t\tclassName={cx(\"glass-ui-bar\", className)}\n\t\t\tstyle={{ ...style, \"--bar-tint\": tint } as CSSProperties}\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<span className=\"glass-ui-bar__header\">\n\t\t\t\t\t<BaseProgress.Label className=\"glass-ui-field__label\">\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</BaseProgress.Label>\n\t\t\t\t\t<BaseProgress.Value className=\"glass-ui-bar__value\" />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<BaseProgress.Track className=\"glass-ui-bar__track\">\n\t\t\t\t<BaseProgress.Indicator className=\"glass-ui-bar__fill\" />\n\t\t\t</BaseProgress.Track>\n\t\t</BaseProgress.Root>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/meter.tsx"
    }
  ],
  "type": "registry:ui"
}