{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter",
  "type": "registry:ui",
  "title": "Meter",
  "description": "Static range meter for quota, storage, score, or usage values.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/range-knobs.ts",
      "target": "@components/control-ui/knob-contracts/range-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/range.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const rangeKnobs = [\n  \"--cui-range-track-radius\",\n  \"--cui-range-track-background\",\n  \"--cui-range-indicator-radius\",\n  \"--cui-range-indicator-background\",\n  \"--cui-range-thumb-radius\",\n  \"--cui-range-thumb-background\",\n  \"--cui-range-thumb-border-color\",\n  \"--cui-range-thumb-shadow\",\n] as const;\nexport type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/range.css",
      "target": "@components/control-ui/styles/recipes/range.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"range\"][data-slot=\"root\"]) {\n    --cui-range-track-radius: 9999px;\n    --cui-range-track-background: var(--muted);\n    --cui-range-indicator-radius: 9999px;\n    --cui-range-indicator-background: var(--primary);\n    --cui-range-thumb-radius: 9999px;\n    --cui-range-thumb-background: var(--background);\n    --cui-range-thumb-border-color: var(--border);\n    --cui-range-thumb-shadow: var(--shadow-sm);\n    --_range-thumb-border-width: 1px;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"track\"]),\n  :where([data-control-family=\"range\"][data-range-kind=\"progress\"][data-slot=\"track\"]),\n  :where([data-control-family=\"range\"][data-range-kind=\"meter\"][data-slot=\"track\"]) {\n    border-radius: var(--cui-range-track-radius);\n    background: var(--cui-range-track-background);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"track\"]) {\n    transition: background-color var(--duration-fast) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"root\"][data-variant=\"plain\"]) {\n    --cui-range-track-radius: 3px;\n    --cui-range-track-background: oklch(from var(--foreground) l c h / 0.06);\n    --cui-range-indicator-radius: 0px;\n    --cui-range-indicator-background: oklch(from var(--foreground) l c h / 0.14);\n    --cui-range-thumb-radius: 1px;\n    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.3);\n    --cui-range-thumb-shadow: none;\n    --_range-thumb-border-width: 0px;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"track\"][data-dragging]) {\n    background: oklch(from var(--foreground) l c h / 0.1);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"indicator\"]),\n  :where([data-control-family=\"range\"][data-range-kind=\"progress\"][data-slot=\"indicator\"]),\n  :where([data-control-family=\"range\"][data-range-kind=\"meter\"][data-slot=\"indicator\"]) {\n    height: 100%;\n    border-radius: var(--cui-range-indicator-radius);\n    background: var(--cui-range-indicator-background);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"indicator\"]) {\n    transition: background-color var(--duration-fast) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"indicator\"][data-dragging]) {\n    --cui-range-indicator-background: var(--primary);\n    background: var(--cui-range-indicator-background);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"]) {\n    position: relative;\n    border: var(--_range-thumb-border-width) solid var(--cui-range-thumb-border-color);\n    border-radius: var(--cui-range-thumb-radius);\n    background: var(--cui-range-thumb-background);\n    box-shadow: var(--cui-range-thumb-shadow);\n    outline: none;\n    transition-property: scale, background-color, box-shadow, height, width;\n    transition-duration: var(--duration-fast);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"]:focus-visible) {\n    --cui-range-thumb-shadow: var(--shadow-sm);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"]:where(:hover, [data-dragging])) {\n    scale: 1.1;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"][data-dragging]) {\n    box-shadow: var(--shadow-md);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"][data-variant=\"plain\"]) {\n    height: 1rem;\n    width: 0.125rem;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"][data-variant=\"plain\"]:where(:hover, [data-dragging])) {\n    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.5);\n    scale: 1;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"thumb\"][data-variant=\"plain\"][data-dragging]) {\n    --cui-range-thumb-background: oklch(from var(--foreground) l c h / 0.7);\n    height: 1.25rem;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"tick\"]) {\n    background: oklch(from var(--foreground) l c h / 0.15);\n    transition-property: height, background-color;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"root\"][data-dragging] [data-slot=\"tick\"]) {\n    height: 0.75rem;\n    background: oklch(from var(--foreground) l c h / 0.25);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"]:is([data-slot=\"label\"], [data-slot=\"value\"])) {\n    color: var(--muted-foreground);\n    transition-property: color, scale, translate;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"root\"][data-dragging] [data-slot=\"label\"]) {\n    translate: -0.25rem -0.375rem;\n    scale: 0.9;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"root\"][data-dragging] [data-slot=\"value\"]) {\n    translate: 0.125rem -0.375rem;\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"value\"]) {\n    font-size: var(--text-caption);\n    line-height: calc(var(--spacing) * 3.5);\n    letter-spacing: var(--tracking-tight);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"label\"]) {\n    font-size: var(--text-caption);\n    line-height: calc(var(--spacing) * 3.5);\n    letter-spacing: var(--tracking-tight);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"slider\"][data-slot=\"root\"][data-disabled]) {\n    opacity: 50%;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"progress\"][data-slot=\"indicator\"]) {\n    transition-property: width;\n    transition-duration: var(--duration-slow);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"progress\"][data-slot=\"value\"]) {\n    font-size: var(--text-label);\n    color: var(--muted-foreground);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"progress\"][data-slot=\"label\"]) {\n    font-size: var(--text-label);\n    font-weight: var(--font-weight-medium);\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"meter\"][data-slot=\"indicator\"]) {\n    transition-property: width;\n    transition-duration: var(--duration-slow);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"meter\"][data-slot=\"value\"]) {\n    font-size: var(--text-label);\n    color: var(--muted-foreground);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"range\"][data-range-kind=\"meter\"][data-slot=\"label\"]) {\n    font-size: var(--text-label);\n    font-weight: var(--font-weight-medium);\n    color: var(--foreground);\n  }\n}\n\n@property --cui-range-track-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-range-track-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-range-indicator-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-range-indicator-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-range-thumb-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-range-thumb-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-range-thumb-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-range-thumb-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/meter.tsx",
      "target": "@components/control-ui/ui/meter.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport type { RangeKnobStyle } from \"@/components/control-ui/knob-contracts/range-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type MeterProps = Omit<\n  ComponentProps<\"div\"> & {\n    value: number;\n    min?: number;\n    max?: number;\n    format?: Intl.NumberFormatOptions;\n    getAriaValueText?: (formattedValue: string, value: number) => string;\n    locale?: Intl.LocalesArgument;\n  },\n  \"style\"\n> & { style?: CSSProperties & RangeKnobStyle };\n\nexport type MeterTrackProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & RangeKnobStyle };\n\nexport type MeterIndicatorProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & RangeKnobStyle };\n\nexport type MeterLabelProps = Omit<ComponentProps<\"span\">, \"style\"> & { style?: CSSProperties & RangeKnobStyle };\n\nexport type MeterValueProps = Omit<\n  Omit<ComponentProps<\"span\">, \"children\"> & {\n    children?: ((formattedValue: string, value: number) => ReactNode) | null;\n  },\n  \"style\"\n> & { style?: CSSProperties & RangeKnobStyle };\n\n// value is required — role=\"meter\" is static gauge, never indeterminate way Progress can be.\nexport function Meter({ className, ...props }: MeterProps) {\n  return (\n    <MeterPrimitive.Root\n      data-control-ui=\"meter\"\n      data-range-kind=\"meter\"\n      data-slot=\"root\"\n      data-control-family=\"range\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function MeterLabel({ className, ...props }: MeterLabelProps) {\n  return (\n    <MeterPrimitive.Label\n      data-control-ui=\"meter\"\n      data-control-family=\"range\"\n      data-range-kind=\"meter\"\n      data-slot=\"label\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function MeterValue({ className, ...props }: MeterValueProps) {\n  return (\n    <MeterPrimitive.Value\n      data-control-ui=\"meter\"\n      data-control-family=\"range\"\n      data-range-kind=\"meter\"\n      data-slot=\"value\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function MeterTrack({ className, ...props }: MeterTrackProps) {\n  return (\n    <MeterPrimitive.Track\n      data-control-ui=\"meter\"\n      data-control-family=\"range\"\n      data-range-kind=\"meter\"\n      data-slot=\"track\"\n      className={cn(\"relative h-2 w-full overflow-hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function MeterIndicator({ className, ...props }: MeterIndicatorProps) {\n  return (\n    <MeterPrimitive.Indicator\n      data-control-ui=\"meter\"\n      data-control-family=\"range\"\n      data-range-kind=\"meter\"\n      data-slot=\"indicator\"\n      className={className}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/range.css\"": {}
  },
  "meta": {}
}