{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "A press-in pill button. It sinks 1px into a well while held and springs back on release: standard, primary and destructive caps at 32 or compact 26, and the link, graphite and strip caps. Tailwind v4 utilities from the theme.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/button/button.tsx",
      "type": "registry:ui",
      "target": "components/metalui/button/button.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\n\n/**\n * Which cap the button wears. `standard` is soft-touch in the colorway,\n * `primary` is the dark cap, and `destructive` is the one red cap. Use at\n * most one primary or destructive cap per group. `link`, `graphite`, `strip`\n * and `strip-danger` set their own size.\n */\nexport type ButtonCap = 'standard' | 'primary' | 'destructive' | 'link' | 'graphite' | 'strip' | 'strip-danger';\n\nexport interface ButtonProps extends BaseButton.Props {\n  cap?: ButtonCap;\n  /** default: 32 tall. compact: 26, 12 pt, raise-sm (the canvas pills: \"seed a sample day\", \"lenses ⌘K\"). The link, graphite and strip caps set their own size. */\n  size?: 'default' | 'compact';\n}\n\n/* Styled with the theme's utilities: the button recipe's sizes, type and layered looks\n * (recipe-button[-<part>][-pressed]). While held it sinks by the recipe's travel in the press time,\n * linear, into its pressed look; it springs back on release. */\nconst FRAME = 'box-border inline-flex items-center justify-center m-0 border-0 whitespace-nowrap cursor-pointer select-none antialiased tap-highlight-none [&>svg]:flex-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-deep data-disabled:cursor-default data-disabled:opacity-button-disabled';\nconst PRESS = 'not-data-disabled:active:translate-y-button-travel not-data-disabled:active:duration-button-press not-data-disabled:active:ease-linear';\nconst REGULAR = 'gap-button-gap h-button-height px-button-pad rounded-pill type-ui transition-button [&>svg]:size-button-glyph';\n\nconst CAPS: Record<ButtonCap, string> = {\n  standard: `${REGULAR} text-ink recipe-button ${PRESS} not-data-disabled:active:recipe-button-pressed`,\n  primary: `${REGULAR} text-button-primary-ink recipe-button-primary ${PRESS} not-data-disabled:active:recipe-button-primary-pressed`,\n  destructive: `${REGULAR} text-button-destructive-ink recipe-button-destructive ${PRESS} not-data-disabled:active:recipe-button-destructive-pressed`,\n  link: 'h-auto p-0 rounded-none bg-transparent type-button-link text-button-link-ink transition-button',\n  graphite: `gap-button-gap h-button-graphite-height px-button-graphite-pad rounded-pill type-button-graphite text-button-graphite-ink recipe-button-graphite transition-button ${PRESS}`,\n  strip: `gap-button-gap h-button-strip-height px-button-strip-pad rounded-button-strip-radius type-button-strip text-button-strip-ink bg-transparent transition-button hover:text-button-strip-ink-hover hover:recipe-button-strip-hover ${PRESS} not-data-disabled:active:recipe-button-strip-pressed focus-visible:outline-none focus-visible:recipe-button-strip-focus`,\n  'strip-danger': `gap-button-gap h-button-strip-height px-button-strip-pad rounded-button-strip-radius type-button-strip text-button-strip-danger-ink bg-transparent transition-button hover:recipe-button-strip-hover ${PRESS} not-data-disabled:active:recipe-button-strip-pressed focus-visible:outline-none focus-visible:recipe-button-strip-focus`,\n};\nconst COMPACT = `gap-button-compact-gap h-button-compact-height px-button-compact-pad rounded-pill type-button-compact text-ink2 hover:text-ink recipe-button-compact transition-button-compact [&>svg]:size-button-compact-glyph ${PRESS} not-data-disabled:active:recipe-button-compact-pressed`;\n\n/** The utilities for a cap and size: the caps that set their own size ignore `size`. */\nexport function buttonClasses(cap: ButtonCap = 'standard', size: 'default' | 'compact' = 'default') {\n  return `${FRAME} ${size === 'compact' && cap === 'standard' ? COMPACT : CAPS[cap]}`;\n}\n\n/**\n * A press-in pill button. While held it sinks 1px and its shadow\n * collapses into a well; on release it springs back. MetalUI icons inside it\n * play their hover pose and press one-shot from the whole button.\n */\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(\n  { cap = 'standard', size = 'default', className, ...props },\n  ref,\n) {\n  const own = `mu-button mu-icon-trigger ${buttonClasses(cap, size)}`;\n  return (\n    <BaseButton\n      ref={ref}\n      data-cap={cap}\n      data-size={size}\n      className={(state) => {\n        const extra = typeof className === 'function' ? className(state) : className;\n        return extra ? `${own} ${extra}` : own;\n      }}\n      {...props}\n    />\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/button.md. SwiftUI: MetalButton in the MetalUI Swift package."
}