{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delta-pill",
  "title": "Delta Pill",
  "description": "Directional change readout — `▲ 6 from 1h ago`. Bare, pill, outline and solid containers.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/delta-pill.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst delta = cva(\n  \"inline-flex items-center gap-1.5 font-sans leading-none whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        /** No container — the `▲ 6 from 1h ago` line under a headline reading. */\n        bare: \"\",\n        /** Frosted capsule, for deltas floating over a photographic ground. */\n        pill: \"lq-glass rounded-full px-2.5 py-1.5\",\n        /** Hairline capsule, for deltas on a solid tile. */\n        outline: \"rounded-full border border-current/20 px-2.5 py-1.5\",\n        /** Filled capsule — use when the delta is the point, not a footnote. */\n        solid: \"rounded-full bg-current/10 px-2.5 py-1.5\",\n      },\n      size: {\n        sm: \"text-[11px]\",\n        md: \"text-[13px]\",\n        lg: \"text-[15px]\",\n      },\n      tone: {\n        /** Inherits the surface color — the reference set's default. */\n        neutral: \"text-current opacity-80\",\n        /** Acid yellow, as on the GLUCOSE readout. */\n        volt: \"text-volt\",\n        positive: \"text-emerald-500 dark:text-emerald-400\",\n        negative: \"text-flare\",\n      },\n    },\n    defaultVariants: { variant: \"bare\", size: \"md\", tone: \"neutral\" },\n  },\n)\n\nconst MARK = {\n  up: \"M6 1.5 11 9.5H1z\",\n  down: \"M6 10.5 1 2.5h10z\",\n  flat: \"M1 5h10v2H1z\",\n} as const\n\nexport interface DeltaPillProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof delta> {\n  direction?: keyof typeof MARK\n  /** The change itself: `6`, `+14%`, `-1 pts`. */\n  value: React.ReactNode\n  /** Context for the change: `from 1h ago`, `this month`. Set quieter. */\n  context?: React.ReactNode\n  showMark?: boolean\n}\n\nexport function DeltaPill({\n  direction = \"up\",\n  value,\n  context,\n  showMark = true,\n  variant,\n  size,\n  tone,\n  className,\n  ...props\n}: DeltaPillProps) {\n  return (\n    <span\n      data-slot=\"delta-pill\"\n      data-direction={direction}\n      className={cn(delta({ variant, size, tone }), className)}\n      {...props}\n    >\n      {showMark ? (\n        <svg viewBox=\"0 0 12 12\" className=\"size-2.5\" aria-hidden>\n          <path d={MARK[direction]} fill=\"currentColor\" />\n        </svg>\n      ) : null}\n      <span data-lq-numeric className=\"font-medium\">\n        {value}\n      </span>\n      {context ? <span className=\"opacity-60\">{context}</span> : null}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}