{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "info-pill",
  "title": "Info Pill",
  "description": "A fact wearing a pill — icon or tabular numeric marker, then a label. Static by design. Six materials.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/info-pill.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The `6 Days` / `Mono Lake, California, USA` / `2 Places Available` run of\n * facts that floats over the reference hero.\n *\n * Deliberately not ChipGroup and not Badge. ChipGroup is a toggle — it owns a\n * selection and reacts to a click. Badge is a 20px status dot with a word\n * next to it. This is neither: it is a full sentence of metadata that happens\n * to be wearing a pill, and it never does anything when you press it.\n *\n * The leading slot takes either an `icon` or a `marker`. A marker is the\n * `50/50` or `7:15PM` prefix from the agenda rows — set in the numeric face\n * so a column of them lines up on the digits.\n */\nconst pill = cva(\n  \"inline-flex w-fit max-w-full select-none items-center rounded-full font-sans whitespace-nowrap\",\n  {\n    variants: {\n      material: {\n        /** Frosted — the reference treatment, for pills over photography. */\n        glass: \"lq-glass text-white\",\n        /** Opaque white. */\n        solid: \"lq-solid text-ink dark:text-white\",\n        /** Filled black. */\n        ink: \"bg-ink text-white shadow-[var(--lq-cast)]\",\n        /** Hairline outline, no fill. */\n        hairline: \"border border-current/18 text-current\",\n        /** A faint wash of the current colour — the quietest container. */\n        wash: \"bg-current/8 text-current\",\n        /** No container at all; just the icon-and-label rhythm. */\n        bare: \"text-current\",\n      },\n      size: {\n        sm: \"h-7 gap-1.5 px-3 text-[12px] [&_svg]:size-3\",\n        md: \"h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-3.5\",\n        lg: \"h-11 gap-2.5 px-4.5 text-[14px] [&_svg]:size-4\",\n      },\n    },\n    compoundVariants: [\n      { material: \"bare\", size: \"sm\", class: \"px-0\" },\n      { material: \"bare\", size: \"md\", class: \"px-0\" },\n      { material: \"bare\", size: \"lg\", class: \"px-0\" },\n    ],\n    defaultVariants: { material: \"glass\", size: \"md\" },\n  },\n)\n\nexport interface InfoPillProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof pill> {\n  /** Leading glyph. Sized by the `size` variant, so pass the bare icon. */\n  icon?: React.ReactNode\n  /** Leading value — `50/50`, `7:15PM`. Rendered in the tabular numeric face. */\n  marker?: React.ReactNode\n  /** Dims the label so the marker or icon carries the emphasis. */\n  quiet?: boolean\n}\n\nexport function InfoPill({\n  icon,\n  marker,\n  quiet = false,\n  material,\n  size,\n  className,\n  children,\n  ...props\n}: InfoPillProps) {\n  return (\n    <span\n      data-slot=\"info-pill\"\n      className={cn(pill({ material, size }), className)}\n      {...props}\n    >\n      {icon ? (\n        <span aria-hidden className=\"inline-flex shrink-0 opacity-70\">\n          {icon}\n        </span>\n      ) : null}\n      {marker ? (\n        <span\n          data-lq-numeric=\"\"\n          className=\"shrink-0 font-mono text-[0.86em] tracking-tight opacity-75\"\n        >\n          {marker}\n        </span>\n      ) : null}\n      <span className={cn(\"truncate\", quiet && \"opacity-65\")}>{children}</span>\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}