{
  "name": "selectable-card",
  "type": "registry:ui",
  "title": "Selectable Card",
  "description": "A card-shaped button with controlled selected state, keyboard focus and pressed semantics.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0"
  ],
  "files": [
    {
      "path": "src/components/ui/selectable-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SelectableCardProps extends useRender.ComponentProps<\"button\"> {\n  selected?: boolean;\n}\n\nexport function SelectableCard({\n  className,\n  selected = false,\n  render,\n  ...props\n}: SelectableCardProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-pressed\": selected,\n    \"data-selected\": selected || undefined,\n    \"data-slot\": \"selectable-card\",\n    className: cn(\n      \"flex w-full cursor-pointer items-center gap-3 rounded-lg border border-input bg-background px-3.5 py-3 text-left text-sm shadow-xs/5 outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 disabled:cursor-not-allowed disabled:opacity-64 data-selected:border-primary/64 data-selected:bg-primary/8 data-selected:ring-1 data-selected:ring-primary/20\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n"
    }
  ],
  "categories": [
    "form-controls"
  ],
  "docs": "# Selectable Card\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Selectable Card for a single card-shaped choice when the whole surface should act as one button and expose its selected state.\n\n## Import\n\n```tsx\nimport { SelectableCard } from \"@/components/ui/selectable-card\";\n```\n\n## Public API\n\n- `SelectableCard` renders a button by default, accepts Base UI's `render` prop and exposes a controlled `selected` boolean.\n- The component mirrors `selected` to `data-selected` and `aria-pressed`; update the value from the consumer's click handler.\n- Native button props such as `disabled`, `type`, accessible naming and keyboard activation remain available.\n\n## Public Motion\n\n- Selection, hover and focus use color, border and ring transitions without moving the card.\n- Reduced motion requires no additional override because the component has no scale or translation animation.\n\n## Public Accessibility\n\n- Keep the card as one semantic button with a clear accessible name.\n- Do not nest buttons, links or other interactive controls inside a clickable Selectable Card.\n- `aria-pressed` describes the selected state; do not replace it with color-only styling.\n\n## Public Agent Guidance\n\n- Use Radio Group for a mutually exclusive list with native radio semantics and Checkbox for independent multiple selection.\n- Keep state controlled by the caller and preserve the button contract.\n- Do not hand-build a clickable card with a non-focusable container.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/form-controls/selectable-card)\n\n- [Registry source](https://ui.siteplane.io/r/selectable-card.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/form-controls/selectable-card",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}