{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "Primary and secondary actions as one unit - depth on hover, underline reveal on the quiet CTA.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/conversion/ButtonGroup.tsx",
      "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n//\n// primary      Main CTA — label, optional href / onClick / icon\n// secondary    Quiet companion action\n// size         sm | md | lg\n// alignment    left | center | right\n// loading      Disable and show a refined spinner on primary\n// className    Styles for the outer shell\n//\ntype Action = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n  icon?: ReactNode;\n};\n\ntype ButtonGroupProps = {\n  primary?: Action;\n  secondary?: Action;\n  size?: 'sm' | 'md' | 'lg';\n  alignment?: 'left' | 'center' | 'right';\n  loading?: boolean;\n  className?: string;\n};\n\nconst SIZE = {\n  sm: 'px-4 py-2 text-xs',\n  md: 'px-5 py-2.5 text-sm',\n  lg: 'px-6 py-3 text-base',\n};\n\nconst ALIGN = {\n  left: 'justify-start',\n  center: 'justify-center',\n  right: 'justify-end',\n};\n\nfunction ActionEl({\n  action,\n  className,\n  children,\n  disabled,\n}: {\n  action: Action;\n  className: string;\n  children: ReactNode;\n  disabled?: boolean;\n}) {\n  if (action.href && !disabled) {\n    return (\n      <a href={action.href} className={className} onClick={action.onClick}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <button\n      type='button'\n      className={className}\n      onClick={action.onClick}\n      disabled={disabled}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport default function ButtonGroup({\n  primary = { label: 'Start free', href: '#' },\n  secondary = { label: 'View demo', href: '#' },\n  size = 'md',\n  alignment = 'left',\n  loading = false,\n  className = '',\n}: ButtonGroupProps) {\n  const pad = SIZE[size];\n\n  return (\n    <motion.div\n      className={[\n        'inline-flex flex-wrap items-center gap-3',\n        ALIGN[alignment],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}\n    >\n      <motion.div\n        whileHover={{ y: -1 }}\n        whileTap={{ scale: 0.985 }}\n        transition={{ type: 'spring', stiffness: 420, damping: 28 }}\n      >\n        <ActionEl\n          action={primary}\n          disabled={loading}\n          className={[\n            'relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-[var(--color-primary,#111827)] font-medium tracking-wide text-[color:var(--color-primary-foreground,#fff)] shadow-[0_1px_0_rgba(255,255,255,0.12)_inset,0_8px_24px_rgba(0,0,0,0.18)] transition-[background-color,box-shadow] duration-300 hover:opacity-90 hover:shadow-[0_1px_0_rgba(255,255,255,0.16)_inset,0_12px_32px_rgba(0,0,0,0.22)] focus:outline-hidden focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring,#111827)] focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-70',\n            pad,\n          ].join(' ')}\n        >\n          {loading ? (\n            <span\n              className='h-3.5 w-3.5 animate-spin rounded-full border border-white/30 border-t-white'\n              aria-hidden\n            />\n          ) : (\n            primary.icon\n          )}\n          {primary.label}\n        </ActionEl>\n      </motion.div>\n\n      {secondary ? (\n        <ActionEl\n          action={secondary}\n          className={[\n            'group relative inline-flex items-center gap-1.5 font-medium tracking-wide text-[color:var(--color-muted-foreground,#4b5563)] transition-colors hover:text-[color:var(--color-foreground,#111827)] focus:outline-hidden focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring,#111827)] focus-visible:ring-offset-2',\n            pad.replace(/px-\\d+(\\.\\d+)?/, 'px-1'),\n          ].join(' ')}\n        >\n          {secondary.icon}\n          <span className='relative'>\n            {secondary.label}\n            <span className='absolute -bottom-0.5 left-0 h-px w-full origin-left scale-x-0 bg-[var(--color-foreground,#111827)] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-x-100' />\n          </span>\n        </ActionEl>\n      ) : null}\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/conversion/ButtonGroup.tsx"
    }
  ],
  "categories": [
    "conversion"
  ],
  "type": "registry:component"
}