{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shift-button",
  "title": "Shift Button",
  "description": "A call-to-action button that trades its leading icon for a directional cue.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/shift-button/shift-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@base-ui/react/button\"\nimport { ArrowRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShiftButtonProps extends Omit<\n  React.ComponentPropsWithoutRef<typeof Button>,\n  \"children\"\n> {\n  children: React.ReactNode\n  leadingIcon: React.ReactNode\n  trailingIcon?: React.ReactNode\n}\n\nexport const ShiftButton = React.forwardRef<HTMLElement, ShiftButtonProps>(\n  function ShiftButton(\n    {\n      children,\n      leadingIcon,\n      trailingIcon = <ArrowRight aria-hidden=\"true\" />,\n      className,\n      ...buttonProps\n    },\n    ref\n  ) {\n    return (\n      <Button\n        {...buttonProps}\n        ref={ref}\n        className={cn(\n          \"group bg-foreground text-background focus-visible:ring-ring hover:bg-foreground/90 inline-grid min-h-11 grid-cols-[1.25rem_auto_1.25rem] items-center gap-3 overflow-hidden rounded-full px-6 py-3 text-sm font-semibold no-underline transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n          className\n        )}\n      >\n        <span\n          data-slot=\"shift-button-leading-icon\"\n          className=\"flex size-5 items-center justify-center transition-[transform,opacity] duration-150 ease-out group-hover:-translate-x-2 group-hover:opacity-0 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:opacity-100 [&_svg]:size-5\"\n        >\n          {leadingIcon}\n        </span>\n        <span data-slot=\"shift-button-label\" className=\"whitespace-nowrap\">\n          {children}\n        </span>\n        <span\n          data-slot=\"shift-button-trailing-icon\"\n          className=\"flex size-5 translate-x-2 items-center justify-center opacity-0 transition-[transform,opacity] duration-150 ease-out group-hover:translate-x-0 group-hover:opacity-100 motion-reduce:hidden [&_svg]:size-5\"\n        >\n          {trailingIcon}\n        </span>\n      </Button>\n    )\n  }\n)\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "button",
    "call-to-action",
    "motion"
  ],
  "type": "registry:ui"
}