{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stagger-button","type":"registry:ui","title":"Stagger Button","description":"Each letter of the label rolls upward one after another on hover.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/stagger-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes } from \"react\";\n\nexport interface StaggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** Button label (plain text, split into letters). */\n  children?: string;\n  /** Ms between each letter starting to roll. */\n  stagger?: number;\n  /** Ms each letter takes to roll. */\n  duration?: number;\n}\n\nexport function StaggerButton({ children = \"\", stagger = 25, duration = 450, className, ...props }: StaggerButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={`group relative inline-flex h-11 items-center justify-center overflow-hidden rounded-full bg-foreground px-7 text-sm font-medium text-background shadow-[inset_0_1px_0_rgb(255_255_255/.15)] transition-[scale,background-color] hover:bg-foreground/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 ${className ?? \"\"}`}\n    >\n      <span className=\"sr-only\">{children}</span>\n      <span aria-hidden className=\"flex\">\n        {Array.from(children).map((c, i) => {\n          const ch = c === \" \" ? \" \" : c;\n          return (\n            <span key={i} className=\"relative inline-block h-[1.3em] overflow-hidden leading-[1.3em]\">\n              <span\n                className=\"flex flex-col transition-transform ease-[cubic-bezier(.7,0,.25,1)] group-hover:-translate-y-1/2 group-focus-visible:-translate-y-1/2 motion-reduce:transition-none\"\n                style={{ transitionDuration: `${duration}ms`, transitionDelay: `${i * stagger}ms` }}\n              >\n                <span>{ch}</span>\n                <span>{ch}</span>\n              </span>\n            </span>\n          );\n        })}\n      </span>\n    </button>\n  );\n}\n"}]}