{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "book-demo-button",
  "description": "Lime square with animated dotted chevron arrows that expands a dark panel on hover to reveal a label.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/new-york/buttons/book-demo-button.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type BookDemoVariant =\n  | \"lime\"\n  | \"sky\"\n  | \"rose\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"orange\"\n  | \"magenta\";\n\ninterface BookDemoButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: BookDemoVariant;\n}\n\nconst variantStyles: Record<\n  BookDemoVariant,\n  { from: string; to: string; dot: string }\n> = {\n  lime: { from: \"#d6f54a\", to: \"#c5ea2c\", dot: \"#0f0f0f\" },\n  sky: { from: \"#a5e0ff\", to: \"#6bc8f5\", dot: \"#0a1f3a\" },\n  rose: { from: \"#ffc4d3\", to: \"#f590a5\", dot: \"#3a0a1f\" },\n  amber: { from: \"#ffd66e\", to: \"#f5a82e\", dot: \"#3a210a\" },\n  emerald: { from: \"#a8efc5\", to: \"#5fd49a\", dot: \"#0a2a1a\" },\n  violet: { from: \"#d4b9ff\", to: \"#a07bf5\", dot: \"#1f0a3a\" },\n  orange: { from: \"#ffb88a\", to: \"#f57a3a\", dot: \"#3a190a\" },\n  magenta: { from: \"#f5a8e0\", to: \"#e060c5\", dot: \"#3a0a2a\" },\n};\n\nconst DoubleChevron = ({ index, color }: { index: number; color: string }) => {\n  const base = index * 0.12;\n  const dots: { cx: number; cy: number; d: number }[] = [\n    { cx: 2, cy: 2, d: 0 },\n    { cx: 5, cy: 5, d: 0.05 },\n    { cx: 8, cy: 8, d: 0.1 },\n    { cx: 5, cy: 11, d: 0.15 },\n    { cx: 2, cy: 14, d: 0.2 },\n    { cx: 6, cy: 2, d: 0.05 },\n    { cx: 9, cy: 5, d: 0.1 },\n    { cx: 12, cy: 8, d: 0.15 },\n    { cx: 9, cy: 11, d: 0.2 },\n    { cx: 6, cy: 14, d: 0.25 },\n  ];\n  return (\n    <svg\n      width=\"14\"\n      height=\"16\"\n      viewBox=\"0 0 14 16\"\n      className=\"shrink-0 overflow-visible\"\n    >\n      <g fill={color}>\n        {dots.map((p, i) => (\n          <circle\n            key={i}\n            cx={p.cx}\n            cy={p.cy}\n            r=\"1\"\n            className=\"bd-dot\"\n            style={{ animationDelay: `${base + p.d}s` }}\n          />\n        ))}\n      </g>\n    </svg>\n  );\n};\n\nconst BookDemoButton = React.forwardRef<HTMLButtonElement, BookDemoButtonProps>(\n  ({ className, children, variant = \"lime\", ...props }, ref) => {\n    const v = variantStyles[variant];\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          \"group/btn bd-root relative inline-flex h-11 w-36 rounded-[12px] overflow-hidden transition-transform active:scale-[0.97]\",\n          className,\n        )}\n        style={{\n          background: \"linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%)\",\n          boxShadow:\n            \"inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.18)\",\n        }}\n        {...props}\n      >\n        <style>{`\n          @keyframes bd-dot-wave {\n            0%, 65%, 100% { opacity: 0.3; transform: translateX(0) scale(0.8); }\n            32% { opacity: 1; transform: translateX(0.5px) scale(1.08); }\n          }\n          .bd-dot {\n            transform-box: fill-box;\n            transform-origin: center;\n            /* Calm, slow shimmer at rest... */\n            animation: bd-dot-wave 1.8s cubic-bezier(0.45,0.05,0.55,0.95) infinite;\n          }\n          /* ...that springs to life (and marches faster) on hover/focus. */\n          .bd-root:hover .bd-dot,\n          .bd-root:focus-visible .bd-dot {\n            animation-duration: 0.95s;\n          }\n          @media (prefers-reduced-motion: reduce) {\n            .bd-dot { animation: none; opacity: 1; transform: none; }\n          }\n        `}</style>\n\n        <span className=\"absolute inset-y-0 right-4 flex items-center text-white font-medium text-[14px] tracking-tight transition-[transform,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover/btn:translate-x-2 group-hover/btn:opacity-0 group-focus-visible/btn:translate-x-2 group-focus-visible/btn:opacity-0 motion-reduce:transition-none\">\n          {children || \"Book a demo\"}\n        </span>\n\n        <span\n          className=\"absolute top-1 left-1 bottom-1 z-10 w-9 group-hover/btn:w-[calc(100%-0.5rem)] group-focus-visible/btn:w-[calc(100%-0.5rem)] group-active/btn:w-[calc(100%-0.5rem)] flex items-center justify-start overflow-hidden rounded-md pl-3 pr-2.5 gap-2.5 transition-[width,gap] duration-260 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none\"\n          style={{\n            background: `linear-gradient(180deg, ${v.from} 0%, ${v.to} 100%)`,\n            boxShadow:\n              \"inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08)\",\n          }}\n        >\n          <DoubleChevron index={0} color={v.dot} />\n          <DoubleChevron index={1} color={v.dot} />\n          <DoubleChevron index={2} color={v.dot} />\n          <DoubleChevron index={3} color={v.dot} />\n          <DoubleChevron index={4} color={v.dot} />\n        </span>\n      </button>\n    );\n  },\n);\n\nBookDemoButton.displayName = \"BookDemoButton\";\n\nexport default BookDemoButton;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/book-demo-button.tsx"
    }
  ],
  "type": "registry:block"
}