{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"meter","title":"Meter","description":"Show a measurement within a known range, such as storage used, with an optional status tone.","dependencies":["@base-ui/react@1.7.0","class-variance-authority@0.7.1"],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/meter/meter.tsx","content":"\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport {\n  type SiteplaneControlSize,\n  siteplaneUIDefaults,\n  useResolvedControlSize,\n} from \"../../system/provider/siteplane-ui-provider\";\nimport {\n  linearIndicatorClassNames,\n  linearIndicatorSizeClassNames,\n} from \"../../system/styles/surface\";\nimport { cn, type WithStringClassName } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\n\nconst METER_DEFAULT_LOCALE = \"en-US\";\n\nconst meterRootVariants = cva(linearIndicatorClassNames.root, {\n  defaultVariants: { size: siteplaneUIDefaults.controlSize },\n  variants: { size: linearIndicatorSizeClassNames.root },\n});\nconst meterLabelVariants = cva(cn(linearIndicatorClassNames.label, \"\"), {\n  defaultVariants: { size: siteplaneUIDefaults.controlSize },\n  variants: { size: linearIndicatorSizeClassNames.label },\n});\nconst meterTrackVariants = cva(linearIndicatorClassNames.track, {\n  defaultVariants: { size: siteplaneUIDefaults.controlSize },\n  variants: { size: linearIndicatorSizeClassNames.track },\n});\nconst meterValueVariants = cva(linearIndicatorClassNames.value, {\n  defaultVariants: { size: siteplaneUIDefaults.controlSize },\n  variants: { size: linearIndicatorSizeClassNames.value },\n});\n\nconst MeterSizeContext = React.createContext<SiteplaneControlSize | null>(null);\n\nexport type MeterTone = \"accent\" | \"success\" | \"warning\" | \"error\";\n/**\n * @deprecated The earlier names of two tones: `default` is `accent` and\n * `destructive` is `error`.\n */\nexport type MeterDeprecatedTone = \"default\" | \"destructive\";\n\nexport interface MeterProps\n  extends\n    Omit<WithStringClassName<MeterPrimitive.Root.Props>, \"size\">,\n    VariantProps<typeof meterRootVariants> {\n  /**\n   * Colours the filled part with a status tone, for example by strength.\n   * `accent`, the default, keeps the progress fill; the fill's value\n   * transition also carries a change of tone. `default` and `destructive` are\n   * the deprecated earlier names of `accent` and `error`.\n   */\n  tone?: MeterTone | MeterDeprecatedTone | undefined;\n}\n\nexport function Meter({\n  className,\n  children,\n  locale = METER_DEFAULT_LOCALE,\n  size,\n  tone = \"accent\",\n  ...props\n}: MeterProps): React.ReactElement {\n  const resolvedTone: MeterTone =\n    tone === \"default\" ? \"accent\" : tone === \"destructive\" ? \"error\" : tone;\n  const resolvedSize = useResolvedControlSize(size);\n  // At its minimum a meter is empty and shows no fill; above it, the fill keeps\n  // a minimum width so a small value stays visible.\n  // NaN counts as empty, as Base UI draws it at the minimum.\n  const empty = !(props.value > (props.min ?? 0));\n  return (\n    <MeterSizeContext.Provider value={resolvedSize}>\n      <MeterPrimitive.Root\n        className={cn(\n          slotClass(\"meter\", props),\n          meterRootVariants({ size: resolvedSize }),\n          className,\n        )}\n        data-empty={empty || undefined}\n        data-size={resolvedSize}\n        data-slot=\"meter\"\n        data-tone={resolvedTone === \"accent\" ? undefined : resolvedTone}\n        locale={locale}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <MeterTrack>\n            <MeterIndicator />\n          </MeterTrack>\n        )}\n      </MeterPrimitive.Root>\n    </MeterSizeContext.Provider>\n  );\n}\n\nexport interface MeterLabelProps\n  extends\n    Omit<WithStringClassName<MeterPrimitive.Label.Props>, \"size\">,\n    VariantProps<typeof meterLabelVariants> {}\n\nexport function MeterLabel({\n  className,\n  size,\n  ...props\n}: MeterLabelProps): React.ReactElement {\n  const groupSize = React.useContext(MeterSizeContext);\n  const resolvedSize = useResolvedControlSize(size ?? groupSize);\n  return (\n    <MeterPrimitive.Label\n      className={cn(\n        slotClass(\"meter-label\", props),\n        meterLabelVariants({ size: resolvedSize }),\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"meter-label\"\n      {...props}\n    />\n  );\n}\n\nexport interface MeterTrackProps\n  extends\n    Omit<WithStringClassName<MeterPrimitive.Track.Props>, \"size\">,\n    VariantProps<typeof meterTrackVariants> {}\n\nexport function MeterTrack({\n  className,\n  size,\n  ...props\n}: MeterTrackProps): React.ReactElement {\n  const groupSize = React.useContext(MeterSizeContext);\n  const resolvedSize = useResolvedControlSize(size ?? groupSize);\n  return (\n    <MeterPrimitive.Track\n      className={cn(\n        slotClass(\"meter-track\", props),\n        meterTrackVariants({ size: resolvedSize }),\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"meter-track\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterIndicator({\n  className,\n  ...props\n}: WithStringClassName<MeterPrimitive.Indicator.Props>): React.ReactElement {\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\n        slotClass(\"meter-indicator\", props),\n        linearIndicatorClassNames.indicator,\n        className,\n      )}\n      data-slot=\"meter-indicator\"\n      {...props}\n    />\n  );\n}\n\nexport interface MeterValueProps\n  extends\n    Omit<WithStringClassName<MeterPrimitive.Value.Props>, \"size\">,\n    VariantProps<typeof meterValueVariants> {}\n\nexport function MeterValue({\n  className,\n  size,\n  ...props\n}: MeterValueProps): React.ReactElement {\n  const groupSize = React.useContext(MeterSizeContext);\n  const resolvedSize = useResolvedControlSize(size ?? groupSize);\n  return (\n    <MeterPrimitive.Value\n      className={cn(\n        slotClass(\"meter-value\", props),\n        meterValueVariants({ size: resolvedSize }),\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"meter-value\"\n      {...props}\n    />\n  );\n}\n\nexport { MeterPrimitive };\n","type":"registry:ui","target":"~/src/siteplane/components/meter/meter.tsx"},{"path":"packages/ui/src/components/meter/index.ts","content":"export * from \"./meter\";\n","type":"registry:ui","target":"~/src/siteplane/components/meter/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/meter.md","categories":["Feedback"],"meta":{"avoidWhen":["Avoid for the completion of a task; use Progress.","Avoid for an unknown or loading state, which Meter has no display for."],"description":"Show a measurement within a known range, such as storage used, with an optional status tone.","knownLimitations":["There are no low, high or optimum thresholds; the application sets the tone."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["meter"],"useWhen":["Use to show a measurement within a known range, such as storage used or a score."]}}