{
  "_note": "Sample Preview — Full data in the purchased Spec Pack",
  "spec_pack_version": "0.1",
  "component": {
    "name": "Button",
    "slug": "button",
    "category": "Buttons",
    "systems_analyzed": 19,
    "total_systems": 20
  },
  "naming": {
    "recommended": "Button",
    "adoption": "100%",
    "all_names": [
      {
        "name": "Button",
        "adoption": "100%",
        "systems": ["Acme DS", "Horizon UI", "Nimbus", "Prism", "Vertex", "··· 14 more"]
      }
    ]
  },
  "anatomy": {
    "image_url": "Included in full Spec Pack"
  },
  "props": [
    {
      "name": "size",
      "type": "enum",
      "default": "md",
      "required": false,
      "adoption": "74%",
      "description": "Changes the size of the button, giving it more or less padding.",
      "values": ["sm", "md", "lg", "xl"]
    },
    {
      "name": "variant",
      "type": "enum",
      "default": "primary",
      "required": false,
      "adoption": "63%",
      "description": "The color of the component.",
      "values": ["primary", "accent", "secondary", "destructive"]
    },
    {
      "name": "appearance",
      "type": "enum",
      "default": "contained",
      "required": false,
      "adoption": "68%",
      "description": "Determines the importance in the hierarchy.",
      "values": ["contained", "outlined", "ghost"]
    }
  ],
  "_props_note": "8 more props in the full Spec Pack",
  "implementation_checklist": [
    { "task": "Button prevents interaction when isDisabled is true", "priority": "high" },
    { "task": "Loading state shows spinner and prevents interaction", "priority": "high" },
    { "task": "Renders as anchor tag when href prop is provided", "priority": "high" }
  ],
  "_checklist_note": "7 more items in the full Spec Pack",
  "keyboard": [
    { "key": "Enter", "action": "Activates the button" },
    { "key": "Space", "action": "Activates the button" }
  ],
  "aria": {
    "role": "button",
    "design_requirements": [
      {
        "requirement": "Visible focus indicator",
        "why": "Keyboard users need to see where focus is",
        "spec": "2px ring, offset 2px, meets 3:1 contrast ratio"
      },
      {
        "requirement": "Minimum touch target size",
        "why": "Users with motor impairments need adequate target size",
        "spec": "44px minimum for touch interfaces"
      }
    ]
  },
  "_aria_note": "2 more requirements + developer handoff notes in full pack",
  "references": [
    { "name": "Acme DS", "url": "https://example.com" },
    { "name": "Horizon UI", "url": "https://example.com" },
    { "name": "Nimbus", "url": "https://example.com" }
  ],
  "_references_note": "16 more references in the full Spec Pack"
}
