{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spot",
  "title": "Spot",
  "description": "an icon at illustration scale (≥64px) · SuccessScreen uses it",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/spot.tsx",
      "content": "import { cn } from 'cn';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type SpotTone = 'muted' | 'primary' | 'success' | 'warning' | 'destructive' | 'info';\nexport type SpotSize = 'md' | 'lg' | 'xl';\n\ntype Props = {\n  icon: LucideIcon;\n  /** md 64 · lg 80 · xl 96. Default `lg`. */\n  size?: SpotSize;\n  tone?: SpotTone;\n  shape?: 'circle' | 'square';\n  /** Draw a soft halo behind the well: the success/celebration treatment. */\n  ring?: boolean;\n  className?: string;\n};\n\nconst SIZES: Record<SpotSize, { well: number; icon: number; halo: number }> = {\n  md: { well: 64, icon: 28, halo: 88 },\n  lg: { well: 80, icon: 36, halo: 108 },\n  xl: { well: 96, icon: 44, halo: 128 },\n};\n\nconst WELL: Record<SpotTone, string> = {\n  muted: 'bg-muted text-muted-foreground',\n  primary: 'bg-primary text-primary-foreground',\n  success: 'bg-success text-success-foreground',\n  warning: 'bg-warning text-warning-foreground',\n  destructive: 'bg-destructive text-destructive-foreground',\n  info: 'bg-info text-info-foreground',\n};\n\nconst HALO: Record<SpotTone, string> = {\n  muted: 'bg-muted/50',\n  primary: 'bg-primary/15',\n  success: 'bg-success/15',\n  warning: 'bg-warning/15',\n  destructive: 'bg-destructive/15',\n  info: 'bg-info/15',\n};\n\n/**\n * An icon at illustration scale: the kit's stand-in for a spot illustration.\n *\n * This is the whole illustration vocabulary: a bell for notifications, a lock for security, a shield for\n * privacy. Themed, so it follows light/dark and re-brands with the tokens. For the leading slot of a row use\n * `IconCircle` instead; the boundary is 44px.\n */\nexport function Spot({ icon: Icon, size = 'lg', tone = 'muted', shape = 'circle', ring, className }: Props) {\n  const s = SIZES[size];\n  const radius = shape === 'circle' ? 'rounded-full' : 'rounded-2xl';\n  const well = (\n    <span className={cn(WELL[tone], radius, 'flex shrink-0 items-center justify-center')} style={{ width: s.well, height: s.well }}>\n      <Icon style={{ width: s.icon, height: s.icon }} />\n    </span>\n  );\n  return (\n    <span aria-hidden className={cn('inline-flex shrink-0 items-center justify-center', ring && cn(HALO[tone], radius), className)} style={ring ? { width: s.halo, height: s.halo } : undefined}>\n      {well}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/spot.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Spot"
    ],
    "api": "<Spot icon size=\"md|lg|xl\" tone? shape=\"circle|square\" ring? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "media"
  ],
  "type": "registry:component"
}