{"name":"meter","type":"registry:ui","files":[{"path":"meter.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Meter as MeterPrimitive } from \"@base-ui-components/react/meter\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Meter({\n  className,\n  children,\n  max = 100,\n  min = 0,\n  style,\n  value,\n  variant = \"linear\",\n  ...props\n}: MeterPrimitive.Root.Props & {\n  variant?: \"linear\" | \"circular\"\n}) {\n  const percentage =\n    max > min ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)) : 0\n\n  return (\n    <MeterPrimitive.Root\n      data-slot=\"meter\"\n      data-variant={variant}\n      className={cn(\n        \"group/meter flex w-full flex-col gap-[var(--hui-space-3)]\",\n        variant === \"circular\" &&\n          \"relative items-center justify-center\",\n        className\n      )}\n      max={max}\n      min={min}\n      style={(state) =>\n        ({\n          ...(typeof style === \"function\" ? style(state) : style),\n          \"--hui-meter-percentage\": percentage,\n        }) as React.CSSProperties & { \"--hui-meter-percentage\": number }\n      }\n      value={value}\n      {...props}\n    >\n      {children ? (\n        children\n      ) : variant === \"circular\" ? (\n        <>\n          <MeterCircularTrack />\n          <MeterValue />\n        </>\n      ) : (\n        <MeterTrack>\n          <MeterIndicator />\n        </MeterTrack>\n      )}\n    </MeterPrimitive.Root>\n  )\n}\n\nfunction MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label\n      data-slot=\"meter-label\"\n      className={cn(\n        \"text-[var(--hui-color-foreground-base-primary)] [font-family:var(--hui-font-body)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {\n  return (\n    <MeterPrimitive.Track\n      data-slot=\"meter-track\"\n      className={cn(\n        \"relative block h-[var(--hui-space-2)] w-full overflow-clip rounded-[1px] bg-[var(--hui-color-background-neutral-secondary)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MeterIndicator({\n  className,\n  style,\n  ...props\n}: MeterPrimitive.Indicator.Props) {\n  return (\n    <MeterPrimitive.Indicator\n      data-slot=\"meter-indicator\"\n      className={cn(\n        \"h-full origin-left bg-[var(--hui-color-background-accent-emphasis)] [transform:scaleX(calc(var(--hui-meter-percentage,0)/100))] motion-safe:[transition:transform_var(--hui-duration-moderate)_linear]\",\n        className\n      )}\n      style={(state) => ({\n        ...(typeof style === \"function\" ? style(state) : style),\n        width: \"100%\",\n      })}\n      {...props}\n    />\n  )\n}\n\nfunction MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value\n      data-slot=\"meter-value\"\n      className={cn(\n        \"text-right text-[var(--hui-color-foreground-base-primary)] tabular-nums [font-family:var(--hui-font-body)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)] group-data-[variant=circular]/meter:absolute group-data-[variant=circular]/meter:top-1/2 group-data-[variant=circular]/meter:left-1/2 group-data-[variant=circular]/meter:-translate-x-1/2 group-data-[variant=circular]/meter:-translate-y-1/2 group-data-[variant=circular]/meter:whitespace-nowrap group-data-[variant=circular]/meter:text-center group-data-[variant=circular]/meter:[font-weight:var(--hui-font-weight-medium)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MeterCircularTrack({\n  className,\n  ...props\n}: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      data-slot=\"meter-circular-track\"\n      viewBox=\"0 0 72 72\"\n      className={cn(\n        \"aspect-square h-[var(--hui-meter-size)] w-[var(--hui-meter-size)] -rotate-90 [--hui-meter-size:var(--hui-space-14)] [--hui-meter-track-size:var(--hui-space-2)]\",\n        className\n      )}\n      {...props}\n    >\n      <circle\n        cx=\"36\"\n        cy=\"36\"\n        data-slot=\"meter-circular-track-circle\"\n        r=\"32\"\n        vectorEffect=\"non-scaling-stroke\"\n        className=\"fill-none stroke-[var(--hui-color-background-neutral-secondary)] [stroke-width:var(--hui-meter-track-size)]\"\n      />\n      <circle\n        cx=\"36\"\n        cy=\"36\"\n        data-slot=\"meter-circular-indicator-circle\"\n        pathLength=\"100\"\n        r=\"32\"\n        strokeDasharray=\"100\"\n        vectorEffect=\"non-scaling-stroke\"\n        className=\"fill-none stroke-[var(--hui-color-background-accent-emphasis)] [stroke-dashoffset:calc(100-var(--hui-meter-percentage,0))] [stroke-linecap:butt] [stroke-width:var(--hui-meter-track-size)] motion-safe:[transition:stroke-dashoffset_var(--hui-duration-moderate)_linear]\"\n      />\n    </svg>\n  )\n}\n\nexport {\n  Meter,\n  MeterLabel,\n  MeterTrack,\n  MeterIndicator,\n  MeterValue,\n  MeterCircularTrack,\n}\n","target":"components/ui/meter.tsx"}],"dependencies":["@base-ui-components/react"]}