{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-button",
  "type": "registry:ui",
  "title": "Icon button",
  "description": "A pressable cap with only a glyph: tool (a graphite cap that latches with a green LED), ghost (flat, round) and mini (inside a chip).",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/icon-button/icon-button.tsx",
      "type": "registry:ui",
      "target": "components/metalui/components/icon-button/icon-button.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/* ICON BUTTON: a pressable cap with only a glyph.\n *   tool    a graphite cap (38, radius 15); pressed sinks 1 into a dark well; latched (pressed={true})\n *           stays down with a 4 pt green LED top right\n *   ghost   a flat round button (28) that fills on hover\n *   mini    a small flat pill (18 × 16) inside a chip, with a 24 × 24 hit area (WCAG 2.5.8); `accept` greens its glyph on hover\n * It renders a <button>; pass `render` through Base UI parts (Toolbar.Button) to join their focus.\n * Styled with the theme's utilities (the icon-button recipe). */\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  variant?: 'tool' | 'ghost' | 'mini';\n  /** The accessible name (and the tooltip, when the host adds one). */\n  label: string;\n  icon: React.ReactNode;\n  /** Latched: the tool stays pressed with its LED. Omit for a momentary button. */\n  pressed?: boolean;\n  /** mini: an accept action (✓), green on hover. */\n  accept?: boolean;\n}\n\nconst FRAME = 'relative box-border inline-grid place-items-center flex-none p-0 border-0 bg-transparent cursor-pointer tap-highlight-none focus-visible:focus-ring-flush disabled:cursor-default disabled:opacity-button-disabled';\nconst VARIANTS = {\n  tool: 'size-icon-button-tool-size rounded-icon-button-tool-radius text-icon-button-tool-ink recipe-icon-button-tool transition-icon-button-tool [&>svg]:size-icon-button-tool-glyph active:translate-y-icon-button-tool-press active:recipe-icon-button-tool-pressed data-pressed:translate-y-icon-button-tool-press data-pressed:recipe-icon-button-tool-pressed data-pressed:after:absolute data-pressed:after:top-icon-button-led-inset data-pressed:after:right-icon-button-led-inset data-pressed:after:size-icon-button-led-size data-pressed:after:rounded-round data-pressed:after:recipe-icon-button-led',\n  ghost: 'size-icon-button-ghost-size rounded-pill text-icon-button-ghost-ink transition-icon-button [&>svg]:size-icon-button-ghost-glyph hover:recipe-icon-button-ghost-hover hover:text-icon-button-ghost-ink-hover',\n  mini: 'w-icon-button-mini-w h-icon-button-mini-h icon-button-mini-hit rounded-pill type-icon-button-mini text-icon-button-mini-ink transition-icon-button hover:recipe-icon-button-mini-hover hover:text-icon-button-mini-ink-hover',\n};\nconst ACCEPT = 'hover:text-icon-button-mini-accept-ink';\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { variant = 'ghost', label, icon, pressed, accept, className, type = 'button', ...props },\n  ref,\n) {\n  const own = `mu-icon-button mu-icon-trigger ${FRAME} ${VARIANTS[variant]}${variant === 'mini' && accept ? ` ${ACCEPT}` : ''}`;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={label}\n      aria-pressed={pressed === undefined ? undefined : pressed}\n      data-variant={variant}\n      data-pressed={pressed ? '' : undefined}\n      data-accept={accept ? '' : undefined}\n      className={className ? `${own} ${className}` : own}\n      {...props}\n    >\n      {icon}\n    </button>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/icon-button.md. SwiftUI: MetalIconButton in the MetalUI Swift package."
}