{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "primitives",
    "finance",
    "accounting"
  ],
  "dependencies": [
    "@base-ui-components/react"
  ],
  "description": "The ⓘ. Extra context that survives touch, because it opens on press.",
  "files": [
    {
      "content": "\"use client\";\n\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { InformationCircleIcon } from \"@/components/ledger/icons\";\nimport {\n  TOOLTIP_DELAY,\n  TOOLTIP_MOTION,\n  TOOLTIP_SURFACE,\n  type TooltipAlign,\n  type TooltipSide,\n} from \"@/components/ledger/tooltip\";\n\nexport interface InfoTipProps {\n  /** Names the affordance for screen readers: \"About available balance\". */\n  about: string;\n  align?: TooltipAlign;\n  children: React.ReactNode;\n  className?: string;\n  /** An optional bolded first line. Use for a term; omit for a plain sentence. */\n  label?: React.ReactNode;\n  side?: TooltipSide;\n  /** Replaces the ⓘ glyph — e.g. a warning triangle beside a broken state. */\n  trigger?: React.ReactNode;\n  triggerClassName?: string;\n}\n\n/**\n * The ⓘ. A Popover rather than a Tooltip because it opens on press, and a\n * 16px glyph carrying a 40px hit area because it is a target on a phone.\n */\nexport function InfoTip({\n  label,\n  children,\n  about,\n  side = \"top\",\n  align = \"center\",\n  trigger,\n  className,\n  triggerClassName,\n}: InfoTipProps) {\n  return (\n    <Popover.Root>\n      <Popover.Trigger\n        aria-label={about}\n        className={cn(\n          \"relative inline-grid size-4 shrink-0 place-items-center rounded-full align-[-2px]\",\n          \"text-text-tertiary transition-colors duration-1 ease-standard\",\n          \"after:absolute after:inset-[-12px] after:content-['']\",\n          \"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]\",\n          \"hover:text-text-secondary\",\n          \"data-[popup-open]:text-text-secondary\",\n          triggerClassName,\n        )}\n        delay={TOOLTIP_DELAY}\n        openOnHover\n      >\n        {trigger ?? <InformationCircleIcon aria-hidden=\"true\" className=\"size-4\" />}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner align={align} className=\"z-tooltip\" side={side} sideOffset={8}>\n          <Popover.Popup className={cn(TOOLTIP_SURFACE, TOOLTIP_MOTION, \"outline-none\", className)}>\n            {label ? <p className=\"mb-1 font-medium text-text-primary\">{label}</p> : null}\n            <div className=\"text-text-secondary\">{children}</div>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n",
      "path": "components/ledger/info-tip.tsx",
      "target": "components/ledger/info-tip.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "info-tip",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/icons",
    "@lopifi/tooltip"
  ],
  "title": "InfoTip",
  "type": "registry:ui"
}