{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "help-icon",
  "title": "Help Icon",
  "description": "Help Icon from the Get IT Done design system.",
  "dependencies": [
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/recipes.json",
    "https://zero-design.itdone.de/r/tooltip.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/help-icon.tsx",
      "content": "'use client';\n\nimport { CircleHelp } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { useLabels } from '@/components/ui/labels-context';\n\n// Figma Help icon (1054:13): 16px icon, Open False|True, Supporting text False|True, Tooltip Top/Bottom/Left/Right (+ arrow).\nexport interface HelpIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'content'> {\n  // Tooltip headline.\n  content: React.ReactNode;\n  // Optional second line under the headline (Figma Supporting text).\n  supportingText?: React.ReactNode;\n  // Accessible name of the trigger. Defaults to `Help`.\n  label?: string;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  align?: 'start' | 'center' | 'end';\n  // Shows the tooltip arrow (Figma Tooltip=Top arrow).\n  arrow?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst HelpIcon = React.forwardRef<HTMLButtonElement, HelpIconProps>(\n  (\n    { className, content, supportingText, label: labelProp, side = 'top', align = 'center', arrow = false, open, defaultOpen, onOpenChange, ...props },\n    ref,\n  ) => {\n    const l = useLabels();\n    const label = labelProp ?? l.help;\n    return (\n    <TooltipProvider delayDuration={150}>\n      <Tooltip open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipTrigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            aria-label={label}\n            className={cn(\n              'inline-flex shrink-0 items-center justify-center rounded-full text-icon-subtle transition-colors hover:text-icon-default',\n              ...focusRing,\n              className,\n            )}\n            {...props}\n          >\n            <CircleHelp aria-hidden=\"true\" className=\"h-icon-sm w-icon-sm\" />\n          </button>\n        </TooltipTrigger>\n        <TooltipContent side={side} align={align} className=\"max-w-xs\">\n          <p className=\"font-medium\">{content}</p>\n          {supportingText && <p className=\"font-normal text-text-inverse-subtle\">{supportingText}</p>}\n          {arrow && <TooltipArrow />}\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n  },\n);\nHelpIcon.displayName = 'HelpIcon';\n\nexport { HelpIcon };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}